Я тут никому не открою Америки, если приведу 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 кассет и желание все их перегнать в цифру.