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>