Модальные окна для вашего сайта бесплатно

Эти веб-окна реализованы с помощью HTML/CSS, легко настраиваются с помощью имеющихся PSD-файлов, и идеально подходят для различных шаблонов и приложений. Также имеются PSD-файлы для удобной настройки.

Как использовать:

1. Подключите библиотеку jQuery между тегами head на вашей странице:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2. Подключите файл style.css из архива между тегами head на вашей странице (не забудьте указать правильный путь к нему):

<link rel="stylesheet" type="text/css" href="styles.css" />

3. Скопируйте все изображения из папки images в папку изображений на вашем сайте (или любую директорию по вашему выбору).

4. Скопируйте HTML-код модального окна, которое вы хотели бы использовать, начиная с DIV, который имеет класс "modal-box":

<div id="warning" class="modal-box wrapper">
    <div class="inside light-yellow">
        <img src="images/warning.png" />
        <h3>Oops! There's been a problem.</h3>
        <p>Sorry, but we don't appear to be able to do what you asked. Please submit a bug report.</p>
        <span class="button white dismiss">
            <span>Dismiss</span>
        </span>
        <a href="#" class="button yellow"><span>Send Bug Report</span></a>
    </div>
</div>

5. Добавьте следующий JavaScript после вызова библиотеки jQuery:

<script type="text/javascript">
$(document).ready( function() {
  // Hide all Modal Boxes
  $('div.modal-box').hide();
  // Display appropriate box on click - adjust this as required for your website
  $('span.modal-link').click(function() {
    var modalBox = $(this).attr('rel');
    $('div'+modalBox).fadeIn('slow');
  });
  // Multiple ways to close a Modal Box
  $('span.modal-close').click(function() {
    $(this).parents('div.modal-box').fadeOut('slow');
  });
  $('span.dismiss').click(function() {
    $(this).parents('div.modal-box').fadeOut('slow');
  });
  $('span.save').click(function() {
    // **** If you need to save or submit information - add your appropriate ajax code here
    $(this).parents('div.modal-box').fadeOut('slow');
  });
});
</script>

Взгляните на демонстрацию, чтобы увидеть примеры создаваемых окон.

Вы можете скачать и использовать эти окна для личных и коммерческих проектов с указанием авторства MediaLoot.

Источник