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

Модальное окно на весь экран CSS при клике

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

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

До появление видим одну кнопку вызова:

Окно на весь экран на CSS для сайта

После клика идет автоматическое заполнение на весь экран монитора:

Модальное окно для текста с помощью CSS свойства

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

Установка:

HEAD

Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/velocity.min.js'></script>

HTML

Код
<section class="compute-science">
  <p>
Как владелец малого бизнеса, вы знаете, что вам нужно использовать социальные сети и другой цифровой маркетинг. Таким образом, вы, вероятно, выполнили свой долг и создали бизнес-страницу Facebook. Вы можете быть разочарованы вашими усилиями и отсутствием увеличения доходов.
  </p>

  <div class="consectetu-section-action">
  <a href="#" class="btn" data-type="modal-trigger">Вызвать окно</a>
  <span class="consectetu-section-bg"></span>
  </div>  
  <div class="consectetu-section">
  <div class="consectetu-section-content">
  <p>
  Если вы не видите ожидаемых результатов со своей страницы, это может быть связано с отсутствующими компонентами, которые необходимы для успешных бизнес-записей Facebook. К счастью, вы можете усилить свое присутствие в Facebook, не будучи экспертом в социальных сетях. Вам просто нужно выполнить несколько улучшений.
  </p>

  <p>
Ваша страница Facebook должна иметь визуальную привлекательность, а фотография на обложке имеет жизненно важное значение для привлечения внимания потенциальных клиентов. Он занимает почти четверть экрана компьютера, поэтому он должен быть эффективным.
  </p>

  <p>
Вы должны выбрать фотографию, которая работает с размерами Facebook 851 пикселей в ширину и 315 пикселей в высоту для компьютеров и 640 x 360 для мобильных устройств. Facebook возьмет вашу фотографию и растянет ее, чтобы соответствовать этим размерам, в некоторых случаях она выглядит странно.
  </p>
  </div>  
  </div>
<a href="#" class="consectetu-section-close">закрыть</a>
  </section>

CSS

Код
.compute-science {
  padding: 2em 5%;
  text-align: center;
  background-color: #ff4747;
}
.compute-science p {
  margin: 2em 0;
  line-height: 1.6;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
  .compute-science {
  padding: 4em 10%;
  }
  .compute-science p {
  font-size: 1.8rem;
  line-height: 2;
  }
}
@media only screen and (min-width: 1170px) {
  .compute-science {
  padding: 4em 20%;
  }
}

.consectetu-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
  -moz-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
  transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
}
.consectetu-section::after {
  /* gradient overlay at bottom of modal window */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  background: transparent;
  background: -webkit-linear-gradient( bottom , #34383c, rgba(52, 56, 60, 0));
  background: linear-gradient(to top, #34383c, rgba(52, 56, 60, 0));
}
.consectetu-section .consectetu-section-content {
  height: 100%;
  width: 100%;
  padding: 3em 5%;
  text-align: left;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.consectetu-section p {
  color: #ffffff;
  line-height: 1.6;
  margin: 2em 0;
}
.modal-is-visible .consectetu-section {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
  -moz-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
  transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
}
.modal-is-visible .consectetu-section .consectetu-section-content {
  -webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 768px) {
  .consectetu-section .consectetu-section-content {
  padding: 4em 10%;
  }
}
@media only screen and (min-width: 1170px) {
  .consectetu-section .consectetu-section-content {
  padding: 6em 20%;
  }
  .consectetu-section p {
  font-size: 2rem;
  line-height: 2;
  }
}

.consectetu-section-action {
  position: relative;
}
.consectetu-section-action .btn, .consectetu-section-action .consectetu-section-bg {
  display: inline-block;
  height: 4em;
  background-color: #34383c;
}
.consectetu-section-action .btn {
  width: 12.5em;
  border-radius: 5em;
  color: #ffffff;
  line-height: 4em;
  white-space: nowrap;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: color 0.2s 0.3s, width 0.3s 0s;
  -moz-transition: color 0.2s 0.3s, width 0.3s 0s;
  transition: color 0.2s 0.3s, width 0.3s 0s;
}
.consectetu-section-action .btn.to-circle {
  width: 4em;
  color: transparent;
  -webkit-transition: color 0.2s 0s, width 0.3s 0.2s;
  -moz-transition: color 0.2s 0s, width 0.3s 0.2s;
  transition: color 0.2s 0s, width 0.3s 0.2s;
}
.consectetu-section-action .consectetu-section-bg {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 4em;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateX(-2em);
  -moz-transform: translateX(-2em);
  -ms-transform: translateX(-2em);
  -o-transform: translateX(-2em);
  transform: translateX(-2em);
  -webkit-transition: visibility 0s 0.5s;
  -moz-transition: visibility 0s 0.5s;
  transition: visibility 0s 0.5s;
}
.consectetu-section-action .consectetu-section-bg.is-visible {
  opacity: 1;
  visibility: visible;
}

.consectetu-section-close {
  position: fixed;
  z-index: 1;
  top: 20px;
  right: 5%;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3) url(https://webdevtrick.com/wp-content/uploads/close-icon.svg) no-repeat center center;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .consectetu-section-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-is-visible .consectetu-section-close {
  visibility: visible;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
@media only screen and (min-width: 768px) {
  .consectetu-section-close {
  top: 70px;
  }
}

JS

Код
jQuery(document).ready(function($){

  $('[data-type="modal-trigger"]').on('click', function(){
  var actionBtn = $(this),
  scaleValue = retrieveScale(actionBtn.next('.consectetu-section-bg'));
   
  actionBtn.addClass('to-circle');
  actionBtn.next('.consectetu-section-bg').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  animateLayer(actionBtn.next('.consectetu-section-bg'), scaleValue, true);
  });

  if(actionBtn.parents('.no-csstransitions').length > 0 ) animateLayer(actionBtn.next('.consectetu-section-bg'), scaleValue, true);
  });

  $('.compute-science .consectetu-section-close').on('click', function(){
  closeModal();
  });
  $(document).keyup(function(event){
  if(event.which=='27') closeModal();
  });

  $(window).on('resize', function(){
  //on window resize - update cover layer dimention and position
  if($('.compute-science.modal-is-visible').length > 0) window.requestAnimationFrame(updateLayer);
  });

  function retrieveScale(btn) {
  var btnRadius = btn.width()/2,
  left = btn.offset().left + btnRadius,
  top = btn.offset().top + btnRadius - $(window).scrollTop(),
  scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());

  btn.css('position', 'fixed').velocity({
  top: top - btnRadius,
  left: left - btnRadius,
  translateX: 0,
  }, 0);

  return scale;
  }

  function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
  var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
  maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
  return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
  }

  function animateLayer(layer, scaleVal, bool) {
  layer.velocity({ scale: scaleVal }, 400, function(){
  $('body').toggleClass('overflow-hidden', bool);
  (bool)  
  ? layer.parents('.compute-science').addClass('modal-is-visible').end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')
  : layer.removeClass('is-visible').removeAttr( 'style' ).siblings('[data-type="modal-trigger"]').removeClass('to-circle');
  });
  }

  function updateLayer() {
  var layer = $('.compute-science.modal-is-visible').find('.consectetu-section-bg'),
  layerRadius = layer.width()/2,
  layerTop = layer.siblings('.btn').offset().top + layerRadius - $(window).scrollTop(),
  layerLeft = layer.siblings('.btn').offset().left + layerRadius,
  scale = scaleValue(layerTop, layerLeft, layerRadius, $(window).height(), $(window).width());
   
  layer.velocity({
  top: layerTop - layerRadius,
  left: layerLeft - layerRadius,
  scale: scale,
  }, 0);
  }

  function closeModal() {
  var section = $('.compute-science.modal-is-visible');
  section.removeClass('modal-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  animateLayer(section.find('.consectetu-section-bg'), 1, false);
  });

  if(section.parents('.no-csstransitions').length > 0 ) animateLayer(section.find('.consectetu-section-bg'), 1, false);
  }
});

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

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

Видео обзор:


Для создания этого оригинального модального окна, нужно создать 3 файла, где первый файл для HTML, второй для CSS и третий файл для JavaScript. А далее следуем по инструкции, что закреплена под описание по созданию этого эффекта без каких-либо ошибок.
2020-03-19 Загрузок: 2 Просмотров: 252 Комментарий: (0)

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

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

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

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