» »

Модальное окно на CSS3 и HTML5

Модальное окно на CSS3 и HTML5

Простое и функциональное модальное окно, которое создана на CSS3 и HTML5 без использования JavaScript, это отличное решение для вывода по клику. Где можно разместить любую информацию, что и делают веб мастера, где некоторые ставят форма входа, также различные инструменты. В нашем случай можно поставить самую актуальную информацию, которую должны заметить как можно больше пользователей. Ведь изначально при открытии сайта мы наблюдаем надпись, где она может быть любой. В нашем случай напишем "Кликни на меня", где после этого по центру появится окно, где по всем сторонам будет затемненный вид в прозрачной гамме.

Вот как раз в этой статье подробно рассмотрим, где и как можно самостоятельно создать модальное окно для вашего сайта. Хотя по сути оно уже создано, но разве можно добавить оформление, где при проверках на работоспособность проверял его на мобильные экраны, где все корректно выводит. Здесь нужно полагать, что оно будет появляться после нажатия на ключевое слово, что изначально разбирали, которое выставим под ссылку на открытие без использования JavaScript и сторонних плагинов.

Это модальные окна или модальные окна обычно создаются с использованием Javascript, но мы создадим одно с использованием чистого HTML5 и CSS3. Что по установке будет не сложно поставить. Также по смене класса, то на сайте есть версия для нескольких вариантов. Не говоря о том, что по оформлению выставить под любую палитру цвета. Где остается крестик в правом верхнем углу, который должен быть виден, чтоб при использовании закрыть окно полностью.

При проверки, где дизайн немного обновил, если что, то в архиве найдете CSS по умолчанию, ведь оформление небольшое, это цветовая гамма, со светлой на серую, но и обвод окна.

Открывающее окно на CSS

Установка:

HTML

Код
<div id="kanodaboves" class="banontrailas">
  <div class="kedusaon_railsomed">
  <div class="makesureg_ousyduving">
  <div class="vingdok_eposition">
  <h3 class="selveloca_bedalmos">ZorNet.Ru — сайт для вебмастера</h3>
  <a href="#zakryvashka" title="zornet.ru" class="zakryvashka">×</a>
  </div>
  <div class="dropasedu-somegeb">  
  <p>Здесь идет описание или содержимое по тематике.</p>
  </div>
  </div>
  </div>
  </div>

  <a href="#kanodaboves">Открыть модальное окно</a>

CSS

Код
.banontrailas {
position: fixed;  
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);  
z-index: 1050;
opacity: 0;  
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in;
pointer-events: none;  
margin: 0;
padding: 0;
}

.banontrailas:target {
opacity: 1;  
pointer-events: auto;
overflow-y: auto;
}

.kedusaon_railsomed {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.kedusaon_railsomed {
max-width: 500px;
margin: 30px auto;  
}
}

.makesureg_ousyduving {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #ececec;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 2px solid rgba(214, 211, 211, 0.53);
  border-radius: 5px;
  outline: 0;
}
@media (min-width: 768px) {
.makesureg_ousyduving {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}

.vingdok_eposition {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.selveloca_bedalmos {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}

.zakryvashka {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}

.zakryvashka:focus, .zakryvashka:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}

.dropasedu-somegeb {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
overflow: auto;
}

Методы, которые используются для создания функционального модального окна, это свойства CSS3 для перехода, непрозрачности, указателя на событие и фонового градиента, где смотрится оригинально.

Где задействуем среди многих других, для отображения форм входа и регистрации или просто уведомления для пользователя, где часто содержат критическую информацию, которую пользователь должен посетить, чтобы вернуться на страницу.

Демонстрация
2019-06-17 Загрузок: 1 Просмотров: 333 Комментарий: (3)

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

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

Комментарий: 3
truepaids
truepaids 2019-06-18 18:441
0
Ну или это возьму 11a
Kolinkor
Kolinkor 2019-06-18 19:292
+1
На чистом стиле, самый норм.
Kosten
Kosten 2019-06-20 02:593
+1
Большой недостаток модального окна, созданного с использованием HTML5 CSS3, - это проблемы совместимости со старыми браузерами. Но по сути работает во всем, включая все мобильные браузеры, кроме IE7 и IE8.
avatar