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

Самое простое модальное окно на CSS

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

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

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

HTML

Код

<label for="o">ZORNET.RU</label>
<input class="checker" type="checkbox" id="o" hidden>
<div class="zotdsa">
  <div class="mesmootlinea">
  <div class="mechamepadt">Сделал некоторые макеты настроек, добавил некоторые гладкие линейные переключатели и получил довольно очаровательный маленький механический геймпад.</div>
  <div class="witanumber">
  <label for="o">Закрыть</label>
  </div>
  </div>
</div>

CSS

Код

label {
  display: inline-block;
  color: #f7f1f1;
  padding: 9px 12px;
  background-color: #1f6086;
  border-color: #266b92;
  border-radius: 4px;
  cursor: pointer;
  }
  .checker:checked + .zotdsa {
  display: flex;
  }
  .zotdsa {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: rgba(0,0,0,.4);
  }
  .mesmootlinea {
  width: 395px;
  background-color: #f6f6fb;
  border-radius: 3px;
  padding: 14px;
  }
  .mechamepadt {
  padding: 5px;
  }
  .witanumber {
  overflow: hidden;
  }

Также при оформление вы самостоятельно можете добавить элементов.

Ширину настраиваем в ручную, что по высоте, все идет автоматически, хотя можно выставить.

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

24 Июня 2018 Просмотров: 1330 Комментариев: (0)

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

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

Kosten

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