AJAX. Модальная форма на сайте.

17.03.2016

Для выполнения операции массовой рассылки электронной почты из браузера мне понадобилась модальная форма (ради красоты, удобства и отсутствия необходимости обновлять страницу). Набор набор адресов получателей письма будет формироваться из Active Directory, но об этом расскажу позже.
И так, модальная форма…
В отличии скажем от delphi , браузер не может выдать нестандартную модальную форму без использования стилей, поэтому первым делом сформируем стиль:

<style type="text/css">;
/* Модальное Окно */
#modal_form {
width: auto;
height: 365px; /* Размеры  фиксированы */
border-radius: 5px;
border: 5px #006699 solid;
background: #e0efff;
position: fixed; /* чтобы окно было в видимой зоне в любом месте */
top: 40%; /* отступаем сверху */
left: 40%; /*  слева */
margin-top: -260px;
margin-left: -150px; /* отступаем  половину от ширины и высоты */
display: none; /* состояние окна по умолчанию */
opacity: 0; /*  прозрачность  */
z-index: 5; /* приоритет */
padding: 20px 10px;
}
/* Кнопка закрытия */
#modal_form #modal_close {
width: 29px;
height: 29px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;

}
/* Подложка */
#overlay {
z-index: 3; /* подложка  выше слоев  сайта, но под слоем  модального окна */
position: fixed; /* перекрывает весь контент сайта */
background-color: #ffffff; /* цвет подложки */
opacity: 0.1; 
width: 100%;
height: 100%; /* во весь экран */
top: 0;
left: 0; 
cursor: pointer;
display: none; /* значения по умолчанию */
}
</style>;

Этот код можно разместить прямо на странице или вынести в отдельный CSS-файл.
Для выполнения кода приведенного далее, необходимо подключить JQuery.
Открытие модального окна будем выполнять по клику на элементе с id=»showform», для этого описываем выполняемые операции внутри

$('a#showform').click( function(event){ // ловим клик по ссылки с id="showform"
event.preventDefault(); //выключаем default роль
$('#overlay').fadeIn(1, //плавно показываем подложку
function(){ 
$('#modal_form')
.css('display', 'block') //меняем отображение
.animate({opacity: 1, top: '50%'}, 2); //прибавляем прозрачность
});
});

Так же описываем операцию закрытия модального окна:

/* Закрытие модального окна, -все в обратном порядке */
 $('#modal_close').click( function(){ // ловим клик 
 $('#modal_form')
   .animate({opacity: 0, top: '45%'}, 20,  //изменяем прозрачность до 0
    function(){ 
     $(this).css('display', 'none'); 
     $('#overlay').fadeOut(40); //прячем подложку
    }
   );
 });

Ну и добавим, для удобства, возможность закрытия окна по нажатию ESC.

$("body").keypress(function(e) { //закрытие окна по esc
if (e.which == 27) {
$('#modal_close').trigger('click');
}
});

В коде приведенном выше, селектор #modal_close указывает на размещенный на форме элемент или текст, по нажатию на который окно закрывается..
Ну и в довесок собственно сама форма,- ее содержимое — на ваше усмотрение.. Это пример.

<div id="modal_form">
<span id="modal_close">X</span>
<form id="mf" name="mailer" enctype="multipart/form-data">
<h3 id="titleform">Создание сообщения электронной почты</h3>
<div id="mfc">
Тема: <input type='text' id='tema' name='tema' value='' size='64' style="font-size:16px;"/>
<p>Файл: <span id="ff"><input  type='file' multiple='true' id='fil' name='fil[]'  size='51' style="font-size:16px;"/></span></p>
<p>Текст: <textarea name="mess" id="mess" rows="9" cols="59" style="font-size:14px;"></textarea></p>
Контактное лицо: <input type='text' id='kont' name='kont' value='' size='56' style="font-size:16px;"/>
<input type='hidden' id='marr' name='marr' value=''/>
</div>
</form>
<div   align="center"><button id="knopka" style="font-size:20px; color:red;" onclick="$('#modal_close').trigger('click');" >Отправить сообщение</button></div>
</div>
<div id="overlay"></div></pre>

Оставить комментарий