» »

Модальное окно без JavaScript на CSS

Модальное окно без JavaScript на CSS

Красиво созданное модальное окно в светлой гамме, которое идет без JavaScript, а на чистом CSS, где также настроено под мобильные аппараты. Также за ним закреплена кнопка, которая выставлена на светло прозрачной форме, но это сделано для красоты, и в этом случай ее оставил. Так как кому-то такая стилистика пригодится в применение в дизайне. Если нет, то просто убираем стиль, что прописаны подл одним классом vusomen, где также закреплены размеры.

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

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

Как это устроено:

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

1. Тот самый дизайнерский обвод, где по центру находится кнопка:

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

2. Эта полный дизайн, как выстроено окно по своему стилю:

Модальное окно на чистом CSS

Установка:

HTML

Код
<div class="vusomen">
  <a class="dekipas" href="#beginem-laselos">Клик по кнопке</a>
</div>
<div id="beginem-laselos" class="demoven-palanceg">
  <div class="cegupodacam">
  <h2>ZorNet.Ru — сайт</h2>
  <a class="koncened" href="#">×</a>
  <div class="danamen-ginuserie">
  Здесь пишем описание, которое соответствует тематике при открытие окна.
  </div>
  </div>
</div>

CSS

Код
.vusomen {
  width: 57%;
  margin: 0 auto;
  background: rgba(208, 197, 197, 0.31);
  padding: 32px;
  border: 3px solid #d6d6d6;
  border-radius: 20px/50px;
  text-align: center;
  background-clip: padding-box;
}

.dekipas {
  font-size: 15px;
  padding: 15px;
  color: #fdf7f7;
  border: 3px solid #19d86a;
  border-radius: 15px/48px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.dekipas:hover {
  background: #0c9e4a;
}

.demoven-palanceg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.demoven-palanceg:target {
  visibility: visible;
  opacity: 1;
}

.cegupodacam {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 58%;
  position: relative;
  transition: all 5s ease-in-out;
}

.cegupodacam h2 {
  margin-top: 0;
  color: #333248;
  font-family: Tahoma, Arial, sans-serif;
}
.cegupodacam .koncened {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.cegupodacam .koncened:hover {
  color: #06D85F;
}
.cegupodacam .danamen-ginuserie {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .vusomen{
  width: 85%;
  }
  .cegupodacam{
  width: 85%;
  }
}

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

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

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

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

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

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