В этом уроке мы рассмотрим еще один способ создания модальных окон. Скрипт может пригодиться там, где нужна подобная реализация без использования мощных и достаточно тяжелых фреймворков (jquery, mootols и т.д.)
Подключаем скрипты и стили.
<link rel="stylesheet" href="css/modal-message.css" type="text/css">
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/modal-message.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
Рассмотрим вывод Html- кода в модальном окне из внешнего файла. Для этого в нужном месте на странице пишем (сделаем сразу 2 окна):
<a href="#" onclick="displayMessage('includes/1.inc', 'modalDialog_contentDiv_alt');return false">Пример 1 (1.inc) </a><br>
<a href="#" onclick="displayMessage('includes/2.inc');return false">Пример 2 (2.inc)</a><br>
Здесь все очень просто - мы по клику запускаем некую функцию displayMessage, в ее параметрах указываем внешний файл, код которого будет загружен в модальное окно. Дополнительно в первом варианте мы указали css-класс который нужно применить для нашего модального окна. Если этот параметр опустить, будет использован стиль по умолчанию. 1.inc и 2.inc - это обычные html-файлы. Убедитесь сами:
<form name="myForm">
<table border="0">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td><label for="firstname">Имя:</label></td>
<td><input type="text" name="firstname" id="firstname"></td>
</tr>
<tr>
<td><label for="lastname">Фамилия:</label></td>
<td><input type="text" name="lastname" id="lastname"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Close" onclick="closeMessage()">
<input type="button" value="Send" onclick="closeMessage()"></td>
</tr>
</table>
<script type="text/javascript">
document.myForm.firstname.focus();
</script>
</form>
Это обычная форма с несколькими input. Содержание 1.inc может любым. Файл 2.inc , думаю, рассматривать не стоит.
CSS файл modal-message.css тоже очень прост:
.modalDialog_transparentDivs{ /* Фоновая заливка */
filter:alpha(opacity=40); /* Прозрачность для IE */
opacity:0.4; /* Прозрачность для нормальных браузеров */
background-color:#AAA;
z-index:1;
position:absolute;
}
.modalDialog_contentDiv{ /* модальное диалоговое окно по умолчанию */
border:3px solid #000;
padding:2px;
z-index:100;
position:absolute;
background-color:#FFF;
}
.modalDialog_contentDiv_shadow{ /* Блок - Тень */
z-index:90;
position:absolute;
background-color:#555;
filter:alpha(opacity=30);
opacity:0.3;
}
/* Альтернативный стиль для вывода сообщенией (использован в первом примере с первым окном) */
.modalDialog_contentDiv_alt{
border:3px solid #FFF;
padding:2px;
z-index:100;
position:absolute;
background-color:#F00;
color:#FFF;
}
Вывести текст/html в модальном окне можно не используя внешние файлы . В этом случае на странице в теге а на клик "повесим" функцию displayStaticMessage:
<a href="#" onclick="displayStaticMessage('<h1>Сообщение</h1><p>это сообщение выводится не используя внешний файл</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Закрыть</a>');return false">Окно 2</a>
Теперь о самих функциях displayMessage и displayStaticMessage. В примере ее включен на странице перед закрывающим тегом </body>, можно поместить ее между <head></head> или вынести в отдельный файл.
<script type="text/javascript">
messageObj = new DHTML_modalMessage();
messageObj.setShadowOffset(5);
// Функция 1
function displayMessage(url,cssClass)
{
messageObj.setSource(url);
messageObj.setCssClassMessageBox(cssClass);
messageObj.setSize(500,300);
messageObj.setShadowDivVisible(true);
messageObj.display();
}// Функция 2
function displayStaticMessage(messageContent)
{
messageObj.setHtmlContent(messageContent);
// messageObj.setSize(300,150);
messageObj.setCssClassMessageBox(false);
messageObj.setSource(false);
messageObj.setShadowDivVisible(false);
messageObj.display();
}function closeMessage()
{
messageObj.close(); }
</script>
Настройка параметров функций:
messageObj.setShadowOffset(5); - размер тени в px.
messageObj.setSource(url); - указываем, что будем выводим в окне внешний файл. В displayStaticMessage(messageContent) в этом параметре стоит false, т.к. в этой ф-ции внешние файлы не подключаются.
messageObj.setCssClassMessageBox(cssClass); - если в параметре указать false, то для окон будут применен класс по умолчанию.
messageObj.setShadowDivVisible(true); - Включить/выключить тень.
messageObj.setSize(500,300); - Размеры окна. Если эту строку удалить, будут поставлены занчения по умолчанию - 400х200px.
Вот и все настройки. Удачи!