Всплывающее модальное окно на CSS3 и jQuery
 | |
| Модальное или всплывающее окно остается популярным, так как в нем можно разместить много и разного материала и вывести по клику на страницу. Вероятно некоторые уже пользовались таким или похожим, по своей конструкций они почти одинаковы или аналогичны, разве по дизайну можно выстроить оригинальнее. Большинство веб мастеров их используют на сайте в функциях для регистраций пользователя, так как установив кнопку и на ней прописать "Регистрация" а остальное все показывается всплывающем окне. Это очень удобно и для других функций, вот потому окно остается актуальным сейчас. Вообще говоря, что оно может и существенно увеличит на интернет сайте конверсию, только при том случай, если все правильно сделать, и безусловно с аналогичным применением. Здесь представлено простое окно, в котором вы уже сами можете выставить полноценный функционал, где появится по одному клику. В сети интернет много разных по своему окон, здесь же будет присутствовать CSS3 и jQuery. Так как есть очень сложные по установке, но там больше всего много разных эффектов и анимация, что безусловно красиво, то также сильно версию. В нашем случай идет простой вариант, где постараемся подробно объяснить, как его правильно установить на портал, где будет содержаться ваша информация. Приступаем к установке: 1. Первым, что сделаем, добавляем код, где будет содержимое, можно выставить в низ сайта. Код <div class="cd-popup" role="alert"> <div class="cd-popup-container"> <h2>ZorNet - портал для вебмастера</h2> <div><iframe width="560" height="315" src="https://www.youtube.com/embed/_9Lshus7yjw?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> <a href="#0" class="cd-popup-close img-replace">Закрыть</a> </div> </div> В код поставили плеер для просмотра. 2. Вторым делом, нужно вывести кнопку или надпись. чтоб вызвать окно. Код <a href="#0" class="cd-popup-trigger">Открыть</a> 3. делом подключаем скрипты jQuery, если у вас на сайте или хостинг уже по умолчанию идет библиотека jQuery, то не нужно ставить. если нет, то прописываем перед тегом head: Код <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 4. Подключаем скрипты для всплывающего окна, где сами файлы jQuery находятся в архиве. что изначально нужно в корень сайта загрузить. Код <script src="js/modernizr.js"></script> <script src="js/main.js"></script> 5. Остается несколько шагов, связанных с CSS, где аналогично устанавливаем тегом head: Код <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> Переходим в CSS и там пропишем стили, которые будут отвечать за стилистику, чтоб веб мастер мог выстроить как он видит на своем ресурсе. CSS Код .cd-popup { opacity: 0; visibility: hidden; transition: opacity 0.3s 0s, visibility 0s 0.3s; } .cd-popup.is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s 0s, visibility 0s 0s; } .cd-popup-container { transform: translateY(-40px); transition-property: transform; transition-duration: 0.3s; } .is-visible .cd-popup-container { transform: translateY(0); } Полный стиль находится в архиве, что скачиваем и при открытие можете изучить и внести свои коррективы. Для полной установки вам нужно скачать архив, в нем вы найдете все файлы, также на демонстрацию, чтоб могли посмотреть и оценить по функциональности материал. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |