[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: модальные окна
Форум PHP программистов > JavaScript
Lenarfate
17.12.2010 - 02:41
Переодически возникают здесь вопросы о модальных окнах на javascript. решил выложить небольшой скрипт в помощь.
так вот.
javascript
//создаем переменные
var modalbox; //само модальное окно
var main; //темный фон


//сразу даем переменным значения id одноименных блоков
window.onload = function()
{
    modalbox = document.getElementById("modalbox");
    main = document.getElementById("main");
} 

//функция показа окна
function showModalbox()
{
    //задаем элементам прозрачность и другие атрибуты
    main.style.filter = "alpha(opacity=50)";
    main.style.opacity = 0.5;
    main.style.display = "block";

    modalbox.style.display = "block";
    modalbox.style.left = "200px";
    modalbox.style.top = "200px";
}

//функция скрытия окна
function hideModalbox()
{
    main.style.display = "none";
    modalbox.style.display = "none";
}


css
#main {
    position:fixed;
    top:0;
    left:0;
    display:none;
    width:100%;
    height:100%;
    //position:absolute;
    //height: expression(this.parentNode.offsetHeight);
    background-color:#000;
    z-index:1;
    opacity:0.5;
    //filter:alpha(opacity:50);
}

#modalbox {
    border:1px solid #666;
    position:fixed;
    background-color:#fff;
    z-index:3;
    display:none;
}

#body {
    padding:10px;
    text-align:center;
}

#body p {
    text-decoration:underline;
    font-weight:bold;
}


а применять примерно так
html

<input type="button" value="показать окно" onclick="showModalbox(); return false;" />

<div id="modalbox" style="filter:alpha(opacity=100)">
    <div id="body">
   <!-- тут все, что угодно -->
        <a href="#" onclick="hideModalbox(); return false;">Закрыть окно</a>
    </div>
</div>
<div id="main"></div>


модифицируйте как угодно. пример в аттаче



Спустя 12 часов, 53 минуты, 28 секунд (17.12.2010 - 14:34) T1grOK написал(а):
Данный скрипт криво работает в некоторых браузерах

Спустя 1 час, 11 минут, 53 секунды (17.12.2010 - 15:46) inpost написал(а):
absolute лучше разместить внутри другого DIV блока (который по сути будет телом) и с свойствами relative, тогда позиционирование будет относительно этого блока.

Спустя 4 часа, 56 минут, 45 секунд (17.12.2010 - 20:43) Lenarfate написал(а):
Цитата
Данный скрипт криво работает в некоторых браузерах

это пример ява скрипта, а не кроссбраузерной верстки

Спустя 1 месяц, 18 дней, 3 часа, 28 минут, 24 секунды (6.02.2011 - 00:11) quickxyan написал(а):
мм, у меня в опере ввобще не лепится.
придется ковырять в чем дело, хотя в js я не силен

Спустя 11 часов, 1 минута, 44 секунды (6.02.2011 - 11:13) quickxyan написал(а):
кто подскажет, как сделать, что бы этот код заработал?

пробовал в IE, Opera, Google Chrome - везде одно и то же.
выводится кнопка, потом текст и ссылка отмена.


Спустя 23 часа, 54 минуты, 13 секунд (7.02.2011 - 11:07) KonstantinK написал(а):
quickxyan код Lenarfate я не смотрел но вот тут http://javascript.ru/tutorial/dom/modify#p...z-soobshcheniya создается модальное окно и объясняют , посмотри может поможет

Спустя 14 минут, 7 секунд (7.02.2011 - 11:21) Lenarfate написал(а):
тут есть этот скрипт http://www.irbis-team.com/15/18. посмори

Спустя 13 минут, 38 секунд (7.02.2011 - 11:35) quickxyan написал(а):
спасибо, у меня есть уже еще один smile.gif правда теперь мучаюсь с настройками этого окна . надо братся за книжку по сss )

Спустя 11 месяцев, 8 часов, 25 минут, 34 секунды (7.01.2012 - 19:01) Guest написал(а):
Доброго времени суток!

Долго искал такую вещь, но радость от того, что нашел была недолгой... :angry:
Сначала я нашел вариант этого скрипта, где всё в одном файле. Он работал отлично. Но мне нужно разделить его так, как он представлен тут. Максимум что получилось, дак это выдернуть css в отдельный файл... А js никак не поддаётся... :angry:

Пожалуйста помогите разобраться кому не сложно! Может я после дня разборов уже не соображаю и может где-то сделал ошибку, которую не вижу(

Мой код:
PHP
echo "
<html>
<head>
<link rel=\"STYLESHEET\" type=\"text/css\" href=\"./skins/".$_SKIN."/style.css\">
<link rel=\"STYLESHEET\" type=\"text/css\" href=\"./skins/".$_SKIN."/modalbox.css\">
<script type=\"text/JavaScript\" src=\"inc/js/modalbox.js\"></script>
...
### инклюдим php-файл в котором нужны эти самые модальные окна ###
CSS
#main {
	position: fixed;
	display: none;
	top: 0px;
	left: 0px;
	background-color: #eee
}
#modalbox {
	border-radius: 5px;
	border: 1px solid #888;
	box-shadow: 0px 0px 25px rgba(0,0,0,0.3);
	position: fixed;
	background-color: #fff;
	display: none;
	z-index: 2
}
.close_link, close_link:visited {
	cursor: pointer;
	color: #868883;
}
.close_link:hover {
	cursor: pointer;
	color: orange;
}
#caption {
	background-color: #bbb;
	border-radius: 4px 4px 0px 0px;
	border-bottom: 1px solid #fff;
	border-color: #888;
	color: #fff;
	font: 14px Trebuchet MS;
	padding: 4px;
	font-weight: bold
}
#footer {
	color: #aaa;
	padding: 4px 6px;
	font: 12px Trebuchet MS;
}
#body {
	padding: 0px 25px;
	font: 11px verdana;
	padding-top: 15px;
	text-align: center
}
JS
var modalbox;
var link;
var scrollWidth;
var scrollHeight;

window.onload = function() {
	modalbox = document.getElementById('modalbox');
	scrollWidth = document.body.scrollWidth;
	scrollHeight = document.body.scrollHeight;
	document.getElementById('main').style.width = scrollWidth;
	document.getElementById('main').style.height = scrollHeight;
}

function ShowModalbox() {
	document.getElementById('main').style.filter = 'alpha(opacity=80)';
	document.getElementById('main').style.opacity = 0.8;
	document.getElementById('main').style.display = 'block';
	document.getElementById('main').style.width = scrollWidth;
	document.getElementById('main').style.height = scrollHeight;
	modalbox.style.display = 'block';
	posleft = Math.round((document.body.clientWidth - modalbox.offsetWidth) / 2);
	postop = Math.round((screen.height - modalbox.offsetHeight) / 3);
	modalbox.style.left = posleft;
	modalbox.style.top = postop;
}

function GoTo(link) {
	HideModalbox();
	document.location.href = link;
}

function HideModalbox() {
	document.getElementById('main').style.display = 'none';
	modalbox.style.display = 'none';
}

Спустя 18 минут, 10 секунд (7.01.2012 - 19:19) Guest написал(а):
забыл отрывок кода где вызывается функция...

echo "
<td align=\"center\" class=\"prod_td\">
<a href=\"javascript: ShowModalbox()\">
<div style=\"width: 100px; height: 100px;\">
<img src=\"".$prev_link."\" style=\"padding-top: ".$marg_top.";\">
</div>".$product['product_name']."
</a>
<div style=\"padding: 10px; color: #777; font-size: 8pt !important;\">".$product['specifications']."</div>
<div style=\"padding: 15px; font-size: 14pt !important;\">".$product['price']." руб.</div>
</td>
";

Спустя 1 час, 18 минут, 21 секунда (7.01.2012 - 20:37) Guest написал(а):
Вопрос решен, но появился другой...

На странице несколько ссылок, по которым должны открываться разные окна, но открывается везде одно и тоже окно, которое описано первым в коде.

Кто-нибудь сталкивался с такой проблемой?

Спустя 10 часов, 59 минут, 34 секунды (8.01.2012 - 07:37) Эли4ка написал(а):
Guest
так потому что к каждому окну надо что-то свое прописать..

Спустя 4 часа, 39 минут, 55 секунд (8.01.2012 - 12:17) Guest написал(а):
Цитата
так потому что к каждому окну надо что-то свое прописать..

ну это само собой разумеется) везде прописано разное, только открывается то окно, которое по коду раньше всех описывается( у меня появилась мысль одна, попробую проверить

Спустя 2 часа, 33 минуты, 34 секунды (8.01.2012 - 14:50) -=J@GU@R=- написал(а):
Вопрос снят. Переделал на другие окна huh.gif
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.