ZorNet.Ru — сайт для вебмастера » Ajax модальное окно » Модальное окно при использование CSS + HTML

Модальное окно при использование CSS + HTML

Нужная функция для сайта, как модальное окно в светлом, что сделано на чистом CSS, которое отлично подойдет для размещения информации или формы. Если своими словами, то мы создаем полноценную страницу, которая по умолчанию скрыта. Но чтоб окно показалось, для этого сделана кнопка или надпись, где при клике всплывает окно. А что оно нечет, то это может форма входа или информер с генераторами, вообще то, то-что вы могли разместить на странице с последствием вывода ссылки на ее.

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

Всплывающее модальное окно на чистом CSS3 без JavaScript

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

Всплывающее модальное окно с участием HTML + CSS

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

Установка:

HTML

Код

<a class="kaneg_okno" href="#sodene_ekugo_okna">Открыть</a>
<div class="okuno_okogka" id="sodene_ekugo_okna">
  <div class="kazves_dizan">
  <h2>ZorNet.Ru — сайт для вебмастера</h2><a class="lamenta" href="#">×</a>
  
  <div class="deksa_mosle_obusa">
  <p>
  Здесь может быть описание, а также содержимое виде кода или генератора с приложением от социальных сетей.
  </p>
  </div>
  </div>
</div>

CSS

Код

.kaneg_okno {
  cursor: pointer;
  line-height: 5rem;
  padding: 1rem 2rem;
  color: #fff8f8;
  border: 2px solid #d9d1d1;
  text-decoration: none;
  -webkit-border-radius: 34px ;
  background-color: #154b50; transition: all 0.3s ease-out; box-shadow: 1px 1px 10px 3px rgb(68 64 64 / 63%), 0px 0px 3px 0px rgb(32 30 30 / 60%);
}

.kaneg_okno:hover {
  background-color: #333f5a;
}

/* Затемнение фона */
.okuno_okogka {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  transition: opacity 500ms;
  visibility: hidden;
  height: 100%;
  opacity: 0;
}
.okuno_okogka:target {
  visibility: visible;
  opacity: 1;
}

/* Модальное окно */
.kazves_dizan {
  margin: 70px auto;
  padding: 1em;
  background: #fff;
  border-radius: 5px;
  width: 90%;
  position: relative;
  transition: all 5s easeout;
}
.kazves_dizan h2 {
  margin: 1em 0;
  color: #2e2c2c;
  font-family: 'Raleway', sans-serif;
}

/* Кнопка закрыть */
.kazves_dizan .lamenta {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #2e2c2c;
}
.kazves_dizan .lamenta:hover {
  color: #609aa1;
}
.kazves_dizan .deksa_mosle_obusa {
  overflow: auto;
}
.deksa_mosle_obusa p{
  text-align: justify;
}
::-webkit-scrollbar {
  z-index: 30;
  width: 5px;
  height: 0;
  y-index: hidden;
}
::-webkit-scrollbar-track {
  background-color: #0c0c0c;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  background-color: #212224;
}
::-webkit-scrollbar-thumb:hover {
  background-color: transparent;
}

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

Демонстрация

29 Октября 2021 Загрузок: 1 Просмотров: 1172 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: -SAM- 26 Ноября 2021 07:31¹ 0 .kazves_dizan {height:auto} - по умолчанию так, следовательно можно задать высоту иную там.