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

Модальное окно при использование 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;
}

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

Демонстрация
2021-10-29 Загрузок: 1 Просмотров: 349 Комментарий: (2)

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

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

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

Комментарий: 2
Grician
Grician 2021-11-24 15:011
0
А как-то увеличить высоту окна можно?
-SAM-
-SAM- 2021-11-26 07:312
0
.kazves_dizan {height:auto} - по умолчанию так, следовательно можно задать высоту иную там.
avatar