Диалоговое окно

JQuery

Ссылка вызова диалогового окна


<a href="#">Вход</a>

Само диалоговое окно


<!-- Диалоговое окно Авторизации пользователя -->
<div id="dialog" class="back-dialog">

<!-- Блок с нашим контентом -->
<div class="dialog-content">// Текст <a href="#">Закрыть</a></div>
</div>

Содержание файла скрипта


$(document).ready(function(){
 $("#dialog").hide(); //скрываем окно при загрузке страница
 });

function opendialog(){
 $("#dialog").fadeIn(); //плавное появление блока
 }

function closedialog(){
 $("#dialog").fadeOut(); //плавное исчезание блока
 }

Содержание файла стилизации


/* Делаем затемнение заднего плана */
.back-dialog{
 width:100%;
 min-height:100%;
 background-color: rgba(0,0,0,0.5);
 overflow:hidden;
 position:fixed;
 top:0px;
 z-index: 9100;
 display: none;
}
/* Позиционируем блок с контентом */
.dialog-content{
 position: relative;
 overflow: hidden;
 overflow-y: auto;
 padding: 0 10 0 10;
 margin:40px auto 0px auto;
 min-width:150px;
 max-width:400px;
 min-height: 150px;
 max-height: 600px;
 background-color: #c5c5c5;
 border-radius: 0 0 5 5;
}

Об авторе

Ремонт компьютеров, создание web сайтов
Напишите свой комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

14 + 4 =