Автоматическое всплывающее окно на CSS3
 | |
| В данной статье рассмотрим, про создание автоматического, а также всплывающего окно с применением HTML и CSS, что появиться с открытием страницы. Где можно установить на сайте под данную страницу, где гость или пользователь открывает, и появляется модальное окно. Так и вижу, что здесь можно задействовать форму входа и регистраций, такая себе просьба, что постоянно мешает, но как зарегистрировался, так окно исчезнет. По сути, такой дизайн очень полезен для отображения формы подписки, или под информационные новости. Но в большинстве можно заметить данный тип автоматического всплывающего окна CSS используется на различных веб-сайтах для отображения пользователю любой информации, которое обязательно должно прочесть, как можно больше человек. Информация может нести рекламный или тематический характер, что соответствует сайту, а значит могут вписаны основные правила на сайте. В некоторых случаях всплывающие окна можно увидеть, когда пользователь нажимает кнопку или ссылку. Здесь вместо простого формального ключевого слова мы наблюдаем стандартную кнопку. По дизайну это окно так выглядит:  Установка: HTML Код <div class="okoseg_akodsa"> <button id="pagekulas">×</button> <h2>ZorNet.Ru — сайт для вебмастера</h2> <p> Вы можете включить любое ключевое слово, имеющее отношение к продукту и его функциям, в свой список ключевых слов серверной части. Варианты написания, распространенные орфографические ошибки. </p> <a href="#">Вперед</a> </div> CSS Код .okoseg_akodsa{ background-color: #ffffff; width: 420px; padding: 30px 40px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; border-radius: 8px; font-family: "Poppins",sans-serif; display: none; text-align: center; } .okoseg_akodsa button { display: block; margin: 0px -26px 0px auto; background-color: transparent; font-size: 38px; color: #ededed; background: #03549a; border-radius: 100%; width: 40px; height: 40px; border: none; outline: none; cursor: pointer; } .okoseg_akodsa h2{ margin-top: -20px; } .okoseg_akodsa p{ font-size: 14px; text-align: justify; margin: 20px 0; line-height: 25px; } a{ display: block; width: 150px; position: relative; margin: 10px auto; text-align: center; background-color: #0f72e5; border-radius: 20px; color: #ffffff; text-decoration: none; padding: 8px 0; } JS Код window.addEventListener("load", function(){ setTimeout( function open(event){ document.querySelector(".okoseg_akodsa").style.display = "block"; }, 2000 ) }); document.querySelector("#pagekulas").addEventListener("click", function(){ document.querySelector(".okoseg_akodsa").style.display = "none"; }); Если посмотреть ниже, то там представлена ссылка на deno страницу, которая поможет вам узнать, как работает это автоматическое всплывающее окно. Здесь также задействован дизайн на HTML и CSS и небольшого количества JavaScript. Этот дизайн можно найти в автоматическом всплывающем поле и снова скрыть с помощью кнопки «Отмена» которая идет под кнопкой, где можно закрыть 2 способами. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |