Сегодня делал красивую форму авторизации на одном сайте и озадачился возможностью организации формы входа в виде красивого появляющегося окошка. На сайте используется jQuery, поэтому выбор очевиден.
Поискав в интернете, я нашел замечательный плагин для jQuery – jQuery simple modal. При размере всего в 8,3Кб плагин оказался достаточно функциональным и крайне простым в использовании.
Давайте рассмотрим пример его использования.
Итак, сначала html-код (часть разметки опускаю, чтобы оставить лишь действительно нужные для понимания элементы):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--По клику на эту ссылку будем показывать окно-->
<a href="#" id="loginLink">вход</a>
<!--Само окно и его содержимое-->
<div id="loginBox">
<h1>Войти на сайт</h1>
<form method="post" action="">
<label for="input_login">логин: </label>
<input type="text" name="input_login" id="input_login"/>
<label for="input_password">пароль:</label>
<input type="password" name="input_password" id="input_password"/>
<button type="submit">Войти</button>
</form>
</div> |
По желанию можете преправить данный код с помощью CSS по вкусу.
Теперь настало время jQuery: подключаем плагин и саму библиотеку:
|
1 2 |
<script type="text/javascript" src="jscripts/jquery.js"></script>
<script type="text/javascript" src="jscripts/jquery.simplemodal.js"></script> |
И пару строк кода на JavaScript:
|
1 2 3 4 5 6 |
$(document).ready(function(){
$('#loginLink').click(function (e) {
$('#loginBox').modal();
return false;
});
}) |
Все – наше модальное окно логина готово!
Ну и напоследок: демо
исходники примера
спасибо полезная штука, как раз то что я и искал!
Вопрос: не работает в Mоzila прошу помочь с решением очень надо….
UPD: Разобрались.
Если нужно, чтобы содержимое окна прокручивалось в Firefox (когда там много данных), нужно в CSS добавить нечто наподобие (для вышеприведенного примера):
#loginBox {
overflow: scroll;
height: 250px;
}
Спасибо за помощь, сайт просто супер!!!
благодарю за программный код!!!