Бывают случаи, когда нужно сделать простое всплывающее окно без подключения различных библиотек, нагружающих страницу.
Задача: при клике на определенную ссылу/кнопку/блок и т.д. немного затемнить фон и посередине вывести определенное окно с информацией.
1 |
<script src="js/jquery-3.2.1.min.js"></script> |
Есть две кнопки, при нажатии на которые выполняется функция show_popap(входной_параметр), где входной_параметр — id необходимого всплывающего окна. Например, первая кнопка вызовет «всплывающее окно 1″(у которого id="modal-1").
С вызовом окон все понятно. Как же их закрывать? В примере для этого использован тэг span с классом close_popap. Вы можете использовать любой другой тэг, будь это изображение, иконка или что-то еще. Главное задать для него класс close_popap.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<button onclick="show_popap('modal-1')">Открыть окно 1</button> <button onclick="show_popap('modal-2')">Открыть окно 2</button> <!-- Окно 1 --> <div class="overlay" id="modal-1"> <div class="flex-popap"> <div class="popap"> <span class="close_popap">Закрыть</span> <h2>Всплывающее окно 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium distinctio ducimus voluptates quaerat veniam debitis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium distinctio ducimus voluptates quaerat veniam debitis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium distinctio ducimus voluptates quaerat veniam debitis.</p> </div> </div> </div> <!-- Окно 2 --> <div class="overlay" id="modal-2"> <div class="flex-popap"> <div class="popap"> <span class="close_popap">Закрыть</span> <h2>Всплывающее окно 2</h2> <img style="max-width: 50%; display: block; margin: auto" src="https://cdn.shopify.com/s/files/1/1061/1924/products/Thinking_Face_Emoji_large.png?v=1480481060" alt=""> </div> </div> </div> |
Изначально подложка (затемнение фона) и само окно скрыто display: none, но при наличии у подложки класса active ей присваивается свойство display:block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.overlay { position: fixed; z-index: 5; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6); /* затемнение фона */ display: none; } .overlay.active { display: block; } .overlay .flex-popap { height: 100%; display: flex; align-items: center; justify-content: center; } .overlay .flex-popap .popap { position: relative; background-color: #fff; /* цвет фона всплывающего блока */ padding: 35px 25px; margin: 0 10px; max-width: 450px; overflow: auto; } .popap span { position: absolute; top: 10px; right: 25px; font-size: 18px; font-weight: 600; cursor: pointer; } |
При вызове функции show_popap блоку с id, равному входному значению, добавляется класс active. При нажатии на элемент с классом close_popap у всех блоков с классом overlay удаляется класс active.
1 2 3 4 5 6 7 8 9 10 |
// функция вызова окна function show_popap(id_popap) { var id = "#" + id_popap; $(id).addClass('active'); } // функция закрытия окна $(".close_popap").click( function(){ $(".overlay").removeClass("active"); }); |
See the Pen Всплывающее окно by webgrind (@webgrind) on CodePen.