Вывод модального окна при загрузке траницы

Как вывести модальное окно при загрузке страницы

Привет, сегодня поговорим о модальных окнах и чудном jQuery плагине — FancyBox. Этот плагин позволяет выводить контент в модальных окнах, так же на его основе можно создать неплохую фото-галерею. Ну ближе к делу.

ПРИМЕР ТАКОГО ОКНА МОЖЕТЕ ПОСМОТРЕТЬ ЗДЕСЬ — это мой сервис для тестирования адаптивности сайта.

Допустим у нас есть форма которую мы хотим вывести при загрузке страницы


<div class="col-sm-12" id="input_adress" style='display:none;'>
<div class="form-group">
<form class="" role="form">
<div class="form-group"><input type="text" name='url' placeholder="Введите адрес сайта"></div>
<div class="form-group "><input name='send_url' class="form-control btn btn-primary" value="Проверить" ></div>
</form>
</div>
</div>

<a href="#input_adress" id="input_adress_link" style="display:none" ></a>— ссылка, по нажатию на которую будет выводится модальное окно. Ее мы будем нажимать программно с помощью метода trigger() — этот метод вызывает событие повешенное на объект , к сожалению другого способа для вывода модального окна при загрузке страницы не нашлось. На оф сайте плагина рекомендуется делать именно так.

Советую обратить внимание на атрибут href ссылки и на ID блока, отображаемого в модальном окне!!!

Вот и сам скрипт вывода модального окна при загрузке страницы.

$(document).one('ready',function() {
$("#input_adress_link").fancybox();
$('#input_adress_link').trigger('click');
$('div #input_adress input[name="send_url"]').click(function(){$.fancybox.close();});});

Не забываем подключить плагин фансибокс и  jQuery. Скачать плагин можно по этой ссылке

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel=»stylesheet» href=»/fancybox/jquery.fancybox-1.3.4.css» type=»text/css» media=»screen» />

Вот так просто все))


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