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

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

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

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

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

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

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

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

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

Установка:

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%;
  }
}

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

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

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

05 Июня 2019 Загрузок: 2 Просмотров: 2012 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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