При открытии модального окна весь экран "гаснет" и на первый план выходит определённый элемент. Его создание не сложно.
Модальное окно с прокруткой
Для большого объёма контента, когда требуется прокрутка, скроллинг 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>
Но возможно этот вариант всё же лучше?
Сделать, чтобы картинка была во весь экран при нажатии на неё
![семья медведей](https://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s00/mishki.jpg)
![лебедь](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NdjENExBJVqolp-VnVPTEnqtb03GY4uZyP4XDVku_jSSnPb1H44HEdN-Mlex6fZVDJsTRjspxuvsqrQFoh3apZYBDuqPGzphQUAK8uvz5AoYCWVlDuPIKrloYicha4EhbAasU_ASemG6/s0/lebed.jpg)
Если нужно только увеличение изображений при клике на них, то можно воспользоваться кодом ниже (не идеально: теги, выше элемента остаются активными):
<!-- размер фотографии, видимой на HTML-странице делается меньше, чем он есть на самом деле. При щелчке по картинке фото принимает свой настоящий вид --> <img src="адрес" alt="" width="150" tabindex="0"/> <img src="адрес" alt="" width="400" tabindex="0"/>
![семья медведей](https://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s00/mishki.jpg)
![лебедь](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NdjENExBJVqolp-VnVPTEnqtb03GY4uZyP4XDVku_jSSnPb1H44HEdN-Mlex6fZVDJsTRjspxuvsqrQFoh3apZYBDuqPGzphQUAK8uvz5AoYCWVlDuPIKrloYicha4EhbAasU_ASemG6/s0/lebed.jpg)
Второй способ основан на этой технике.
<!-- размер фотографии, видимой на 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/
0 коммент.:
Отправить комментарий