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

Выезжающее модальное окно внизу на CSS

Красиво исполнено модальное окно, которое после клика по кнопке появляется снизу сайта, что может нести различную информацию и или функцию. По своей конструкции это простое модальное окно, которое создано при помощи jQuery и CSS, где не нужно подключать плагинов, так как все работает на стилистике, сто отвечает за функциональность, как появление окна снизу при нажатии кнопки.

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

Так выглядит сама основа окна, которое выезжает самого низа.

Приступаем к установке:

HTML

Код

<div class="container">
  <a class="kovosing grokos-nolebsuke-nedagaves">Открыть окно</a>
  <div class="bougasetun">
  <div class="mepodanungas">ZorNet - портал для вебмастера</div>
  <div class="vosungoumom"><p>Владельцы сайта впервые и даже опытные пользователи могут увлечься идеей нового сайта и ошибиться при выборе веб-хостинга. Эти ошибки могут иметь далеко идущие последствия для успеха вашего сайта. Вот некоторые распространенные ошибки, которые вы бы хорошо сделали, чтобы избежать при выборе веб-хостинга.</p>
  <a class="kovosing sulpemate-guidekou-besodun">Закрыть</a>
  </div>
  </div>
</div>

CSS

Код

.mepodanungas {
  padding:20px;
  border-bottom: 1px solid #e4e0e0;
  font: 300 24px Lato;
  position: relative;
  }
  .vosungoumom {
  padding: 14px;
  font: 300 15px Lato;
  }

.container > .kovosing {
  margin: 57px;
  padding: 18px 37px;
  font-size: 28px;
  border-radius: 35px;
}
.bougasetun {
  background: #e2e2e2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  top: 100%;
  position: fixed;
  left: 0;
  text-align: left;
  }

.kovosing {
  background: linear-gradient(to right, rgb(209, 216, 76), rgb(36, 152, 40));
  padding: 10px 25px;
  display: inline-block;
  border-radius: 25px;
  margin: 18px 0;
  color: #f9f9f9;
  position: relative;
  transition: all .4s ease;
  cursor: pointer;
  }
  .kovosing:hover{
  box-shadow: 0 3px 15px rgba(8, 8, 8, 0.2);
  }

.container.bougasetun-open .bougasetun {
  top: 0;
}

Код

$('.grokos-nolebsuke-nedagaves').click(function(){
$('.container').addClass('bougasetun-open');
});

$('.sulpemate-guidekou-besodun').click(function(){
$('.container').removeClass('bougasetun-open');
});

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

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

15 Января 2019 Загрузок: 1 Просмотров: 3209 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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