Модальные окна: Simple Modal для jQuery. Часть 1
Я уже писал о создании модального окна в одной из предыдущих заметок. Но там мы создавали окно сами, а сегодня рассмотрим готовое решение. SimpleModal v1.1.1 — легкий (2.8 Кб в сжатом виде) и простой в использовании jQuery плагин для создания диалоговых окон.
Как обычно, подключаем в разделе head HTML-документа необходимые файлы:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.simplemodal.js" type="text/javascript"></script>
<script src="js/jquery.simplemodal.js" type="text/javascript"></script>
Модальное окно создается при вызове функции modal():
1. вызов функции modal() для объекта jQuery:
data.modal([options]);
Например:
$('<div>my data</div>').modal({options});
$('#myDiv').modal({options});
jQueryObject.modal({options});
$('#myDiv').modal({options});
jQueryObject.modal({options});
2. вызов stand-alone jQuery-функции, где data — jQuery-объект, элемент DOM или строка (которая может содержать HTML):
$.modal(data, [options]);
Например:
$.modal('<div>my data</div>', {options});
$.modal('my data', {options});
$.modal($('#myDiv'), {options});
$.modal(jQueryObject, {options});
$.modal(document.getElementById('myDiv'), {options});
$.modal('my data', {options});
$.modal($('#myDiv'), {options});
$.modal(jQueryObject, {options});
$.modal(document.getElementById('myDiv'), {options});
Внутри плагина SimpleModal определены CSS-классы:
- modalOverlay: стиль для overlay div-элемента
- modalContainer: стиль для div-элемента окна
- modalCloseImg: стиль для кнопки закрытия окна
Продолжение следует…
Оставьте свой отзыв