Модальные окна? Легко и просто!

Модальные окна? Легко и просто!

Не так давно, мне потребовался скрипт модальных окон. Конечно можно было бы написать свой скрипт, но для этого есть нужные плагины и мне было как то лень :D Ну вообщем облазил весь интернет в поисках нужного плагина. Но не нашёл подходящего. Нашёл что то похожее на то, что мне надо — FaceBox. Но это было не то. Мне нужен был скрипт, где я мог бы изменить дизайн окошка так, как мне угодно. Но рыться в исходниках плагина не хотелось. Да и мне кажется скрипт лучше чем подключать сам плагин для модального окошка. Меньше нагрузки на страницу. Так вот, не нашёв подходящего скрипта я решил написать свой код. Скажу честно, метод отображения окон я спёр с одного плагина (дальше поймёте какой именно метод).

Итак приступим

Шаг 1. Основа

<script type="text/javascript" src="jQuery. js"></script>

Без самой библиотеки не обойтись никак.

Шаг 2.Html

Сейчас разберём сам каркас нашего модального окошка

<div rel="modal1" class="modal"><h2>Вызова модального окошка</h2></div>

<div class="modalbox" id="modal1">

Тут сам контент окошка или же html-код его дизайна

<div class="close">Закрыть</div>

</div>

Каркас модального окошка состоит из дива вызова окошка и из самого окошка, тобишь содержимое. К диву вызова приписываем атрибут rel modal1 а само окошка оборачиваем в div с таким же значением — modal и приписываем class modalbox который скрывает по умолчанию содержимое модального окна. Атрибут и индификтор должны быть одинаковыми для одного окошка (для другого соответственно другие одинаковые атрибут и индификатор). Это у нас будет пример 1-го модального окошна.

Второй пример будет состоять так же из вызова и содержимого, но уже с дизайном окошка (от моего блога).

<div rel="modal2" class="modal"><h2>Вызов модального окна - С оформлением</h2></div>

<div class="modalbox" id="modal2">

<div class="mtl"></div>

<div class="mtr"></div>

<div class="mtc"><img src="http://stilant. ru/wp-content/themes/OnTemp/img/spacer. gif" border="0" alt="ff" /></div>

<div class="mcc"><div class="title2"><span>Модальное окно</span>

<div class="close">x</div></div>

</div>

<div class="mcc" style="padding:4px;">

Содержимое

</div>

<div class="mbl"></div>

<div class="mbr"></div>

<div class="mbc"><img src="http://stilant. ru/wp-content/themes/OnTemp/img/spacer2.png" border="0" alt="ff" /></div>

</div>

Код такой же как и в первом примере но уже с другим атрибутом и индификатором и с дизайном окна.

И наконец 3-й пример модального окна который имеет технологию CSS3. Но я Вам не советую использовать CSS3 так как не все браузеры её поддерживают. Но попробовать стоит.

<div rel="modal3" class="modal"><h2>Модальное окно - CSS3</h2></div>

<div class="modalbox" id="modal3">

<div class="modalcss3">

Содержимое

<div class="close">Закрыть</div>

</div>

</div>

Контент модального окна оборачивается лишь одним дивом.

И перед </body> ставим

<div id="fadebody"></div>

Шаг 3. Css

Теперь пора применить стили для правильного отображения наших окон

/*Основа модального окна*/

.modal { cursor:pointer;

}

.modalbox { display: none; position: fixed; top: 50%; left: 50%; z-index: 99999; min-width:300px; max-width:500px; text-align:left;

}

#fadebody { display: none; background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; z-index: 9999;

}

.close { cursor:pointer; text-align: center;

}

/*Css для 2 примера*/

.mtl { background:url('img/modal. png') no-repeat; width:2px; height:2px; float:left;

}

.mtc { background:#ffffff; overflow:hidden;

}

.mtr { background:url('img/modal. png') no-repeat; background-position: 100% -2px; width:2px; height:2px; float:right;

}

.mcc { background:#ffffff; text-align:left;

}

.mbl { background:url('img/modal. png') no-repeat; background-position: 100% -6px; width:2px; height:2px; float:left;

}

.mbc { background:#ffffff; overflow:hidden;

}

.mbr { background:url('img/modal. png') no-repeat; background-position: 100% -4px; width:2px; height:2px; float:right;

}

.mcc. title2 { border-bottom:1px solid #d9d9d9; margin:auto; margin-left:13px; margin-right:13px; line-height:33px; height:33px;

}

.mcc. title2 span { float:left; color:#000000; text-decoration:none; font-size:15px;

}

.mcc. title2 .close { float:right; line-height:33px; height:33px; font-size: 0.9em; cursor:pointer;

}

.mcc. title2 .close a { color:#000000; text-decoration:none;

}

/*Css для 3 примера*/

.modalcss3 { padding:5px; background:#ffffff;

-webkit-border-radius: 5px;

-moz-border-radius: 5px; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 20px rgba(0,0,0,0.5);

}

Тут стили для всех 3-х примеров модальных окон.

Шаг 4.jQuery

И теперь самое главное — jQuery код

<script type="text/javascript">

$(document).ready(function() {

$('div. modal').click(function() { var modalid = $(this).attr('rel');//Узнаём атрибут rel

$('#' + modalid).fadeIn(600);//И индификатор с узнаным раннее атрибутом плавно появляется

$('#fadebody').fadeIn(600);//И сайм тёмный фон тоже появляется var topm = ($('#' + modalid).height() + 10) / 2; var leftm = ($('#' + modalid).width() + 10) / 2;

// Код узнаёт длину и ширину окна и делит на 2

$('#' + modalid).css({

'margin-top' : - topm,

'margin-left' : - leftm

});//И потом отнимает полученные цифры дабы окно располагалось по центру страницы

$('#fadebody, .close').click(function() {

$('#fadebody, .modalbox').fadeOut(600) return false;

});//Ну а здесь по клику модальное окно и тёмный фон плавно исчезают

});

});

</script>

Выше приводится код с подробными комментариями.

Насчёт того метода который я упомянул в начале статье. В одном плагине был метод как кроссбраузерно расположить модальное окно на странице. Ну я его и позаимствовал. Только не помню в каком из плагинов это было.

В итоге у нас получился довольно простой скрипт модальных окон. Само оформление контента окна можете редактировать как Вам захочется. Можете расположить большую картинку в котором и будет располагаться модальное окно или написать свой html-код. Дело Ваше.


Карта сайта


Информационный сайт Webavtocat.ru