Модальные окна: Simple Modal для jQuery. Часть 2
Добавляем стиль элементов через внешний CSS-файл:
background-color:#000;
cursor:wait;
}
#modalContainer {
height:400px;
width:600px;
left:50%;
top:15%;
margin-left:-300px; /* half the width, to center */
background-color:#fff;
border:3px solid #ccc;
}
#modalContainer a.modalCloseImg {
background:url(../img/x.png) no-repeat;
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-14px;
right:-18px;
cursor:pointer;
}
Для того, чтобы MS IE 6 стал учитывать альфа-канал PNG для кнопки закрытия окна, необходимо задействовать фильтр AlphaImageLoader:
<style type='text/css'>
#modalContainer a.modalCloseImg{
background:none;
right:-14px;
width:22px;
height:26px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img/x.png', sizingMethod='scale'
);
}
#modalContainer {
top: expression((document.documentElement.scrollTop
|| document.body.scrollTop) + Math.round(15 *
(document.documentElement.offsetHeight
|| document.body.clientHeight) / 100) + 'px');
}
</style>
<![endif]-->
Функции modal() может быть передан объект настроек модального окна:
- overlay: прозрачность; от 0 до 100; 0 - прозрачный, 100 - непрозрачный; по умолчанию - 50;
- overlayId: ID overlay div-элемента; по умолчанию - ‘modalOverlay’;
- overlayCss: CSS-стиль для overlay div-элемента; по умолчанию - {} (пусто);
- containerId: ID div-элемента окна; по умолчанию ‘modalContainer’;
- containerCss: CSS-стиль для div-элемента окна; по умолчанию - {} (пусто);
- close: показывать (true) или нет (false) кнопку закрытия окна; по умолчанию true;
- closeTitle: значение атрибута title для кнопки закрытия окна; по умолчанию ‘Close’;
- closeClass: CSS класс, привязанный к событию закрытия окна; по умолчанию ‘modalClose’;
- onOpen: функция, которая будет вызвана при открытии окна; по умолчанию null;
- onShow: функция, которая будет вызвана после открытия окна; по умолчанию null;
- onClose: функция, которая будет вызвана при закрытии окна; по умолчанию null;
Ссылки по теме: