Модальное окно для сайта на CSS + jQuery

Модальное окно для сайта с использованием CSS + html + jQuery.

Модальное окно для сайта на CSS + jQuery
11 месяцев назад

Модальное окно для сайта на CSS + jQuery

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

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

Функционал всплывающего окна позволяет разместить любую нужную информацию: отрывок видеозаписи, фотографию, текст, форму обратной связи и т.д.
content.htm
<div id="open-window">Открыть модальное окно</div>

<div id="win_modal" class="modal">
  <div class="outer">
    <div class="middle">
      <div class="inner">

        <div class="content">
	      <span class="close">&times;</span>
           <div id="bg_modal">Внимание</div>
           <p>Модальное окно HTML + jQuery + CSS</p>
        </div>

      </div>
    </div>
  </div>
</div>
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html, body {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

#open-window {
  display: table;
  padding: 15px 30px;
  margin: 40px auto;
  background: #f1f1f1;
  cursor: pointer;
  color: #000;
  font-size: 14px;
  font-weight: 900;
}

.outer {
  display: table;
  width: 100%;
  height: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  width: calc(100% - 30px);    
  padding-left: 15px;
  padding-right: 15px;
}

.modal {
  display: none;
  position: fixed;
  width: 100%; 
  height: 100%;
  top: 0;
  z-index: 10;
  background-color: rgba(0,0,0,0.5);
}

.content {
  max-width: 450px;
  margin: 0 auto;
  background-color: #fefefe;
  padding: 0;
  border: 1px solid #999;
}

.close {
  color: #909bb5;
  float: right;
  padding: 10px 10px 0 0;
  font-size: 28px;
  font-weight: 600;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#bg_modal {
  padding: 20px 10px 20px 10px;
  background: #e0e0e0;
  color: #444;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}

#text-modal {
  padding: 30px 10px 20px 10px;
  color: #000;
}

p {
  padding: 25px 20px;
  font-size: 16px;
}
modal.js
$(document).ready(function() {
    var modal = document.getElementById("win_modal");
    var span = document.getElementsByClassName("close")[0];

    $('#open-window').on('click', function () {
        modal.style.display = "block";
    });

    span.onclick = function() {
        modal.style.display = "none";
    }
    
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
            }
    }
});
779
Демо Скачать
Комментарии

    ×
    Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.