Модальные окна: Simple Modal для jQuery. Часть 2
Добавляем стиль элементов через внешний CSS-файл:
#modalOverlay {
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;
}
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:
<!--[if lt IE 7]>
<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]-->
<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;
Ссылки по теме:
CharnaD:
Спасибо за ссылку на меня) С меня трекбек
5 Декабрь 2008, 14:15Zabuhailo:
Не очень понял, как окно закрыть программым способом.
Задача проста. В модальном окне есть форма с кнопкой. Жмем на кнопку - нужную инфу оправили (к примеру ajax). Теперь нужно окно закрыть. Что вызывать?
Вызывать $(’#simplemodal-container a.modalCloseImg’).click(); - (эмуляция клика по кнопке Close) не очень-то красиво.
Thnx.
26 Март 2009, 13:06admin:
Zabuhailo, $.modal.close();
26 Март 2009, 13:46Дмитрий:
Скачал скрипт обратной формы, но почему то письма не пересылает,
31 Март 2009, 14:37может какие нибуть дополнительные настройки в сам скрипт ввести надо. А так красиво, Спасибо!
Ольга:
скачала исходники. у меня не работает Contact Form
11 Апрель 2009, 22:11admin:
скачала исходники. у меня не работает Contact Form
13 Апрель 2009, 10:35В этой заметке я рассматривал модальное окно, а не форму обратной связи.
Ольга:
а я и имею в виду модальное окно - оно не появляется.
13 Апрель 2009, 21:50admin:
а я и имею в виду модальное окно - оно не появляется
14 Апрель 2009, 9:03Только что скачал исходники - все работает.
Эл:
IE 6 почему то PNG все не прозрачные, хотя пользователей все меньше, но хотелось бы делать сайт не для браузеров, а для людей.
8 Май 2011, 7:50Спасибо!
admin:
IE 6 почему то PNG все не прозрачные
да, есть такая проблема для IE 6. Но есть и множество решений, в том числе и на jQuery:
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>