Модальное окно (lightbox) на CSS.

При открытии модального окна весь экран "гаснет" и на первый план выходит определённый элемент. Его создание не сложно.

Модальное окно с прокруткой

Для большого объёма контента, когда требуется прокрутка, скроллинг body, а не содержимого всплывающей записи вызывает неудобство.

образец

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

Если в нём разместить небольшое содержание, например, форму обратной связи, форму регистрации, форму "заказать обратный звонок" или текстовое сообщение, то оно будет располагаться по центру.

образец

Видео YouTube в модальном окне

<style>
img[src$="/mqdefault.jpg"] + iframe {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box; box-sizing: border-box;
  border: solid rgba(0,0,0,.3);
  border-width: 5vh 5vw;
}
</style>

<img title="видео: переправа" alt="переправа" src="http://img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg" height="180" width="320" class="tr-caption-container"/>

<script>
var img = document.querySelectorAll('img[src$="/mqdefault.jpg"]');
for (var i = 0; i < img.length; i++) {
  img[i].onclick = function() {
    var idImg = this.src.replace(/http...img.youtube.com.vi.(.*?).mqdefault.jpg/gi, '$1');
    theIframe = document.createElement('iframe');
    theIframe.src = '//www.youtube.com/embed/' + idImg + '?rel=0&autoplay=1';
    theIframe.onclick = function () {this.parentElement.removeChild(this);};
    this.parentNode.insertBefore(theIframe, this.nextSibling);
  }
}
</script>

Но возможно этот вариант всё же лучше?

Сделать, чтобы картинка была во весь экран при нажатии на неё

 

Если нужно только увеличение изображений при клике на них, то можно воспользоваться кодом ниже (не идеально: теги, выше элемента остаются активными):

<!-- размер фотографии, видимой на HTML-странице делается меньше, чем он есть на самом деле. При щелчке по картинке фото принимает свой настоящий вид -->
<img src="адрес" alt="" width="150" tabindex="0"/>
<img src="адрес" alt="" width="400" tabindex="0"/>

 

Второй способ основан на этой технике.

<!-- размер фотографии, видимой на HTML-странице делается меньше, чем он есть на самом деле. При щелчке по картинке фото принимает свой настоящий вид -->
<img src="адрес" alt="" width="150" class="zoom"/>
<img src="адрес" alt="" width="400" class="zoom"/>

Эффекты http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/