На главную
Новости
Рейтинг
Каталог
Статьи
Графика
Веб инструменты
|
||
|
||
|
|
|
|
Webobzor.net -> Статьи -> Java Script
Модальное окно на JavaScript11.07.2008 12:29В продолжении темы всплывающих окон, попробуем создать модальное окно, то есть окно, которое всплывает поверх страницы и не дает сделать никаких действий, пока не будет закрыто. На практике я часто встречал подобные окна. Например, на сайте nervov.net модальное окно используется для входа в панель управления пользователя. Так же модальное окно можно отображать при всевозможных сообщениях. В отличии от стандартных prompt, confirm и alert, в модальном окне вы можете размещать все что угодно: картинки, текст, формы. Еще одной стороной применения модальных форм является отображение popup баннеров. Представьте, что пользователь заходит на ваш сайт, а там моментально появляется popup окно и пока пользователь не нажмет на него, он не сможет попасть на сайт. Что бы вы сделали? Я бы ушел с сайт :) Но все же. Вступление затянулось. Как и в предыдущих статьях, я не буду детально описывать код, лишь объясню принципы работы модального окна. 1. Когда пользователь вызывает окно, на весь экран вешается DIV с position:absolute, top и left = 0, ширина и высота соответственно ширине и высоте экрана. Этим мы запрещаем пользователю выполнять какие-либо действия на страницы. Для эффекта, можно добавить прозрачности DIVу (что мы и сделаем). 2. На этот DIV и ложиться модальное окно (второй DIV). Разумеется тоже с position: absolute. 3. После закрытия модального окна, оба DIVа скрываются. 4. В данной статье я использую дополнительный третий DIV для придания эффекта тени окна. А теперь непосредственно код: <style> #main { position: absolute; display: none; top: 0px; left: 0px; background-color: #fff } #modalbox { width: 300px; height: 200px; border: 1px solid #ECC113; position: absolute; background-color: #FFEFAF; display: none; z-index: 2 } div#shade { background-color: #ECECEC; width: 300px; height: 200px; position: absolute; display: none; z-index: 1 } .log { text-decoration: underline; cursor: pointer; color: #ff0000 } #caption { background-color: #FF6826; border-bottom: 1px solid #fff; color: #fff; font: 11px verdana; padding: 4px; font-weight: bold } #body { padding: 10px; font: 11px verdana; padding-top: 15px; text-align: center } #body table { font: 11px verdana } #body a { color: #FF6600 } .but { font: 11px verdana } </style> <body> <span class="log" onclick="ShowModalbox()">Войти</span> <div id="shade"></div> <div id="modalbox" style="filter: alpha(opacity=100)"> <div id="caption" style="filter: alpha(opacity=100)">Модальное окно :: Вход</div> <div id="body"> Введите данные для входа: <br><br> <table> <tr> <td align="right">* Логин: </td> <td colspan="2"><input type="text" size="10" maxlength="255"> <td><a href="http://www.webobzor.net/">Регистрация</a></td> </tr> <tr> <td align="right">* Пароль: </td> <td colspan="2"><input type="text" size="10" maxlength="255"> <td><a href="http://www.webobzor.net/">Забыли пароль?</a></td> </tr> <tr> <td></td> <td><input type="checkbox"></td> <td>запомнить</td> </tr> </table> <br> <input type="button" value="Вход" class="but" onclick="LogIn()"> <input type="button" value="Отмена" class="but" onclick="HideModalbox()"> </div> </div> <div id="main"></div> </body> <script> var modalbox; var shade; var scrollWidth; var scrollHeight; window.onload = function() { modalbox = document.getElementById("modalbox"); shade = document.getElementById("shade"); scrollWidth = document.body.scrollWidth; scrollHeight = document.body.scrollHeight; document.getElementById("main").style.width = scrollWidth; document.getElementById("main").style.height = scrollHeight; } function ShowModalbox() { document.getElementById("main").style.filter = "alpha(opacity=80)"; document.getElementById("main").style.opacity = 0.8; document.getElementById("main").style.display = "block"; modalbox.style.display = "block"; shade.style.display = "block"; posleft = Math.round(scrollWidth / 2) - 150; postop = document.body.scrollHeight - 600; shade.style.left = posleft + 7; shade.style.top = document.body.scrollTop + 307; modalbox.style.left = posleft; modalbox.style.top = document.body.scrollTop + 300; } function LogIn() { HideModalbox(); document.location.href = "http://www.webobzor.net/"; } function HideModalbox() { document.getElementById("main").style.display = "none"; modalbox.style.display = "none"; shade.style.display = "none"; } </script> Все довольно просто и понятно. При нажатии на кнопку "Вход" вызывается функция ShowModalbox. При нажатии на кнопку "Отмена" - функция HideModalbox. Пример: Войти Модальное окно :: Вход
Скачать пример можно тут. Все вопросы и пожелания жду в комментариях. Комментарии: [8]
Добавить комментарий:
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
