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

Модальное окно без использования JavaScript

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

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

Так смотрится кнопка, при открытьи сайта или страницы.

Кнопка для всплывающих окон

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

Отзывчивое окно на чистом CSS3

Установка:

HTML

Код
<!-- Кнопка -->  
<div class="modalnaya_vermiya_okna">
  <label for="modunosa_okoshko" class="modunosa_okoshko">Показать окно</label>
</div>
   
<!-- Модальное окно -->  
<input type="checkbox" id="modunosa_okoshko" />  
<div class="cmc">
  <div class="cmt">
  <p>Благодаря достижениям в области блокчейн, технологии, которая поддерживает цифровые активы, такие как биткойн, в последние годы популярность криптовалют резко возросла. Это вызвало серьезную отраслевую тенденцию, когда возникли биржи криптовалюты, позволяющие потребителям обменивать криптовалюты на другие активы, такие как бумажные деньги или другие цифровые валюты.</p>
  </div>
  <label for="modunosa_okoshko" class="uvkades_okosheka"></label>
</div>

CSS

Код
/* Контейнер для кнопки */
.modalnaya_vermiya_okna {
  height: 60px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Убираем флажок */
#modunosa_okoshko {
  display: none;
}
/* Кнопка для открытия */
.modunosa_okoshko {
  display: inline-flex;
  margin: 10px;
  text-decoration: none;
  position: relative;
  font-size: 14px;
  line-height: 14px;
  padding: 16px 28px;
  color: #efefef;
  /* font-weight: bold; */
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  background: #215582;
  border-radius: 50px;
  cursor: pointer;
  border: 2px solid #6ab5f5;
  overflow: hidden;
  z-index: 1;
}
.modunosa_okoshko:hover,
.modunosa_okoshko:active,
.modunosa_okoshko:focus {
  color: #efefef;
}
.modunosa_okoshko:before {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  bottom: 0;
  left: 0;
  border-right: 50px solid transparent;
  border-top: 50px solid #2D6B9F;
  transition: transform 0.5s;
  transform: translateX(-100%);
  z-index: -1;
}
.modunosa_okoshko:hover:before,
.modunosa_okoshko:active:before,
.modunosa_okoshko:focus:before {
  transform: translateX(0);
}

/* Контейнер, который затемняет страницу */
#modunosa_okoshko + .cmc {
  display: none;
}
#modunosa_okoshko:checked + .cmc {
  display:flex;
  align-items:center;
  justify-content:center;  
  z-index: 4;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: bg 0.5s ease;
  background: rgb(8 35 58 / 70%);
}

/* Модальное окно */
#modunosa_okoshko:checked + .cmc .cmt {
  font-family: Verdana, sans-serif;
  font-size: 18px;
  padding: 18px;
  width: 96%;
  color: #464444;  
  max-width: 600px;
  max-height: 70%;
  transition: 0.5s;
  border: 3px solid #55a3e4;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0 4px 12px rgb(33 33 33 / 40%), 0 16px 20px rgb(47 44 44 / 20%);
  text-align: center;
  overflow: auto;
  animation: scale 0.5s ease;
}
/* Кнопка с крестиком закрывающая окно */
.uvkades_okosheka {
  content: "";
  width: 48px;
  height: 48px;
  border: 6px solid #abc8e0;
  border-radius: 100px;
  position: absolute;
  z-index: 10;
  top: 18px;
  right: 18px;
  box-shadow: 0 4px 12px rgb(25 25 25 / 20%), 0 16px 20px rgb(25 25 25 / 20%);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
  background-color: #FFF;
  background-size: cover;
  animation: move 0.5s ease;
  cursor: pointer;
}

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

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

Источник: atuin.ru
2021-08-19 Загрузок: 1 Просмотров: 339 Комментарий: (0)

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

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

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

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