Окно для скрипта

Так будет выглядеть итоговый вариант:

<ваш скрипт>
...

<div class="code html" style="background: rgb(236, 234, 242); border-color: rgb(205, 197, 191); border-image: initial; border-style: solid; border-width: 2px 2px 2px 10px; color: #003399; font-family: &quot;Courier New&quot;; font-size: 16.8px; font-stretch: normal; height: auto; line-height: normal; margin: 6.71875px 20.191px; overflow-x: auto; overflow-y: hidden; padding: 10px; position: relative; vertical-align: baseline; white-space: nowrap;">
&lt;ваш скрипт&gt;<br /><span style="border: 0px; color: black; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">...</span></div>
</div>

Модальное окно (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/

источник

Всплывающее окно с прокруткой

Требуется сделать всплывающее окно, открывающееся по клику на ссылку, и показать в нем текст. При этом, если текст большой, иметь вертикальную прокрутку.

Я не сумел самостоятельно составить такой код, поэтому взял в сети похожий скрипт и попытался приспособить его под эту задачу. Получилось очень много лишнего кода (json тут и вообще не нужен). Но главное - не работает вертикальная прокрутка!

Как бы этот код упростить и вставить прокрутку?

Модальные окна с красивыми эффектами

Сегодня мы хотим поделиться скриптами модальных окон с красивыми эффектами. Различных вариаций очень много, так что каждый сможет найти своё.

Идея в том, что модальное окошко нужно показать при клике на кнопку (элемент страницы); далее последует приятная анимация и собственно появляется окно.

На версиях iOS < 6 мобильной версии Safari, могут быть проблемы с отображением.