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

• Всплывающее окно при входе на сайт
• зафиксировать панель

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

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

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

образец

Название. Если оно очень длинное, то обрезается, когда не помещается в одну строку, в конце появляется многоточие.✖

<!-- CSS прописать один раз -->


<!-- input, label и div идут друг за другом, между ними не должно быть других тегов. for тот же, что и id.
id должен использоваться на странице только единожды. То есть, чтобы создать несколько всплывающих элементов, нужно всем input задать один класс lightbox, но разные id. -->
<input type="checkbox" id="dva" class="lightbox1"/>
<label for="dva">образец</label>
<div><div>
  <label for="dva"></label>
  <div>
    <div>Название<label for="dva">✖</label></div>
    <div>Модальное окно для большого содержания</div>
  </div>
</div></div>

<!-- пока красивого решения убрать скролл body я не вижу. Могу предложить в input добавить обработчик событий JavaScript -->
<script>
var inp = document.getElementsByClassName('lightbox1');
for (var i = 0; i < inp.length; i++) {
  inp[i].onclick = function() {
    document.documentElement.style.overflow=(this.checked ? 'hidden' : 'auto');
    document.documentElement.style.marginRight=(this.checked ? '17px' : '');
  }
}
</script>

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

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

образец

форма обратной связи ✖

Видео 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/