Простое модальное окно на jQuery для одноразмерного viewport`а

Для того, чтобы облегчить восприятие информации на сайте, разработчики применяют всевозможные спойлеры и модальные окна. Чаще всего в такие штуки “заключают” информацию, которая нужна не каждому посетителю и для того, чтобы ее увидеть посетитель готов немного поработать мышкой.

Мне кажется не правильным использовать какие-то jQuery-плагины для создания только модального окна, так как это можно реализовать очень просто на обычном jQuery.

Я тут никому не открою Америки, если приведу 3 листинга кода. Этот код написал лично я и из-за это несказанно рад.

Вот так оно выглядит:

Простое модальное окно

Как все работает?

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

Чтобы скрыть этот блок, необходимо кликнуть на фоне и блок с фоном одновременно исчезнут.

Реализация

html-код выглядит вот так:

<a href="#" id="id_modal" class="modal_link">модальное окно</a>
<div id="id_modal" class="modal">Не правда, всё просто!!!</div>

Здесь стоит пояснить только одно: идентификатор id_modal должен быть уникальным для каждой пары ссылка + скрытый блок и используется для добавления нескольких, независимых ссылок на разные модальные окна.

За саму динамику отвечает JS-код:

<script>
$('a.modal_link').click(function(){
  $(this).after('<div class="back"></div>');
  var id_modal = '#' + $(this).attr('id');
  $(id_modal + '.modal').show();
  $('.back').show(200);
});
$('.back').live('click',function(){
  $('.back').remove();
  $('.modal').hide();
});
</script>

Ну и для того, чтобы это все выглядело красиво есть вот такой вот CSS-код:

.modal {
  position: absolute;
  display: none;
  top: 30%;
  left: 30%;
  min-width: 240px;
  max-width: 40%;
  width: 70%;
  z-index: 20;
  padding: 20px;
  border-radius: 20px;
  background: #FFF;
}
.back {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: #000;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  opacity: 0.4;
}

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

P.S. Наверное, каждый человек хотел бы иметь под рукой простой и функциональный инструмент для редактирования своей домашней видеоколлекции. Редактирование видео на русском можно делать простым видеоредактором Movavi. Это, наверное, реальный выход для тех людей, у которых есть огромная коллекцией VHS кассет и желание все их перегнать в цифру.

Комментарии:

  1. Citrus612 опубликовал комментарий 3 Март 2016, 20:26 #

    Очень понравилось ваше решение с модальным окном, но вот в чем косяк, при повторном открытии окна, затемнение сайта суммируется, то есть после 3-5 нажатий, фон просто становится черным!

    Не знаете как решить?

    | Ответить
Имя
e-mail
Сайт
Текст комментария: