ZorNet.Ru — сайт для вебмастера » HTML и CSS » Автоматическое всплывающее окно на CSS3

Автоматическое всплывающее окно на CSS3

Автоматическое всплывающее окно на 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 способами.

Демонстрация
2021-11-14 Загрузок: 1 Просмотров: 279 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar