Легкое модальное окно
Данный материал предоставлен сайтом All4Cms.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Легкое модальное окно.
Скачать бесплатно Легкое модальное окно.
Классический принцип работы: нажимаем на кнопку - экран затемняется и появляется строго по центру модальное окно, куда вы можете вставить какую либо информацию.
Инструкция по установке на сайт
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>
Готово!
Скачать Легкое модальное окно
modal_window.zip
MD5: 64a658d842800f4be498b35be209efc1
Скачано: 448, размер: [5,19 Kb], дата: 23 июнь 2013
Если ссылка на скачивание файла не доступна - дайте нам знать об этом через форму обратной связи
- Скрипты / Полезные статьи
- 23-06-2013, 22:59
- 4 310