» » » Легкое модальное окно

Легкое модальное окно

0
Легкое модальное окно

Классический принцип работы: нажимаем на кнопку - экран затемняется и появляется строго по центру модальное окно, куда вы можете вставить какую либо информацию.

Инструкция по установке на сайт
1. Скачиваем архив
2. Заливаем файл modal.css и изображение close.png в корень сайта
3. В head вставляем этот код:
<link href="modal.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>$(document).ready(function() { $('a[name=modal]').click(function(e) { e.preventDefault(); var id = $(this).attr('href'); var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); $(id).fadeIn(2000); }); $('.window .close').click(function (e) { e.preventDefault(); $('#mask, .window').hide(); }); $('#mask').click(function () { $(this).hide(); $('.window').hide(); });});</script>

4. Там, где мы хотим видеть кнопку на вывод модального окна, вставляем следующий код:
<a href="#dialog" name="modal" class="button medium blue">Открыть модальное окно</a>
<div id="boxes">
<div id="dialog" class="window">
<a class="close" href="#"/><img src="close.png"></a>
<h3>Содержимое модального окна</h3>
</div>
<div id="mask"></div>
</div>

Готово!
Внимание!
Для просмотра скрытого текста, Вам необходимо Войти или Зарегистрироваться.
  • Скрипты, Полезные статьи
  • 23-06-2013, 22:59
  • 2039
Вернуться назад
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.