Всплывающее модальное окно сайта на CSS
 | |
| Трудно уже представить сайт где нет модального окна, так как по функциональности, оно на все тематики подходит и установка проста. И здесь представлено окно на чистых стилях, где не нужно добавлять не какой скрипт, а значит загрузка его на интернет ресурс, будит минимальной, что очень большой плюс. Но и дизайн его выполнен красиво, что вы сами можете внести свой коррективы в него, а это цвет или просто убрать закругленные углы. Как поняли, это всплывающего окна на CSS, которое производится по клику. Вы в него можете поставить как описание, или если это кино сайт, то трейлер выставить. Некоторые его ставят в сам материал, здесь просто переключаем на Панель HTML кодов, так как корректно только на этих кодах работает. Из эффектов в нем только кнопка отключение, где при наведение она становится красной. В самом коде выставлен центр, вы можете его убрать, если хотите писать статью и все начиналось с левой стороны. Главный плюс, это автоматически все подстраивается, вам только нужно все написать и желательно потом проверить на визуальном редакторе и только после этого прописать. Здесь нужно запомнить, что саму разметку менять не нужно, то оно просто работать не будет. Здесь видим, что можно написать и поставить изображение, на главной как заметили стоит видеоролик.  Переходим к установке: Это кнопка вызова, в нашем случай просто надпись, где производим клик и появляется окно, по его всем сторонам темно прозрачный фон. Код <a href="javascript:void(0)" onclick="this.nextElementSibling.style.display='block';">Вызываем появление окна</a> Далее идет основа, где как раз будет материал, поставим в низ или вверх сайта. Код <div id="parent_popup_click1" class="parent_popup_click"> <div class="popup_click"> <h2>Всплывающее окно на сайте ZORNET.RU</h2> <p><center> <div align="center">Проверяю модальное окно, чтоб потом залить на сайт ZORNET.RU как материал.</div><div align="center"><br></div><div align="center"> <iframe width="560" height="315" src="https://www.youtube.com/embed/A6mF2SUHKpk" frameborder="0" allowfullscreen></iframe></div> </center> <a class="close" title="Закрыть" onclick="document.getElementById('parent_popup_click1').style.display='none';">X</a> </div> </div> Остается CSS: Код .parent_popup, .parent_popup_click { background-color: rgba(0, 0, 0, 0.8); display: none; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } .popup, .popup_click { background: #fff; max-width: 600px; width:70%; margin: 5% auto; padding: 5px 20px 13px 20px; border: 10px solid #ddd; position: relative; /*--CSS3 CSS3 Тени для Блока--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 Закругленные углы--*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .popup h2, .popup_click h2 { font:28px Monotype Corsiva, Arial; font-weight: bold; text-align: center; color: #008000; text-shadow: 0 1px 3px rgba(0,0,0,.3); } .popup h3, .popup_click h3 { font:24px Monotype Corsiva, Arial; color: #008000; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.3); } /* кнопка закрытия */ .close { background-color: rgba(0, 0, 0, 0.8); border: 2px solid #ccc; height: 24px; line-height: 24px; position: absolute; right: -24px; cursor: pointer; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 14px; font-family: helvetica, arial; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); top: -24px; width: 24px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background-color: rgba(255, 69, 0, 0.8); } PS - проверен на тестовом сайте и работает отлично, главное как уже было сказано, это его простата и корректно отображается. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
