Скрипт модального окна на чистом Javascript

В редакторе

Скрипт модального окна на чистом Javascript

Lorax
940
2016-08-26 10:47:23
76c60b65
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modal window</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="container"> <div class="modal-wrapper"> <a href="#" data-target="#modal-window" class="open-modal btn-open">Open modal window</a> </div> </div> <div id="modal-window"> <div class="overlay" data-hide="#modal-window"></div> <div class="modal-window-inner modal_div"> <div class="modal-head"> <h1>Заголовок модального окна</h1> </div> <div class="modal-text"> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которой всемогущая за имени снова, пустился, запятых дороге, рукописи если своих парадигматическая свое подзаголовок которое? От всех большого власти ipsum за.</p> </div> <div class="modal-close"> <a href="#" data-hide="#modal-window" class="close-modal btn-close">Закрыть</a> </div> </div> </div> </body> </html>
/*Style for modal window script*/ .modal-wrapper { text-align: center; } .btn-open { border: 1px solid #c6c6c6; background: #4d90fe; border-color: #3079ed; font-weight: bold; margin: 10px 0 0 0; padding: 10px 12px; cursor: pointer; border-radius: 2px; display: inline-block; color: #fff; transition: 0.3s; outline: none; text-decoration: none; } .btn-open:hover { background: #357ae8; border-color: #2f5bb7; } #modal-window { display: none; } .modal-window-open { display: block !important; transition: all 500ms ease-in-out 0s; } .modal-window-inner { border: 1px solid #000; max-width: 450px; height: 226px; border-radius: 5px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); background: #fff; position: fixed; top: 50%; margin-top: -113px; left: 50%; margin-left: -225px; z-index: 5; } .modal-head h1 { color: #000; font-size: 24px; } .modal-head { border-bottom: 1px solid #ccc; padding: 10px; } .overlay { background: #40616f; height: 100%; width: 100%; cursor: pointer; position: absolute; left: 0; top: 0; opacity: 0.8; z-index: 1; } .modal-text { padding: 10px; } p { text-align: justify; color: #000; font-size: 15px; line-height: 21px; } .modal-close { padding: 10px; border-top: 1px solid #fff; background: #f5f5f5; } .btn-close { display: inline-block; padding: 4px 14px; margin-bottom: 0; font-size: 14px; line-height: 20px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; cursor: pointer; background-color: #f5f5f5; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #bbbbbb; border-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-bottom-color: #a2a2a2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); }
(function(){ var showButtons = document.querySelectorAll('[data-target]'), closeButtons = document.querySelectorAll('[data-hide], .overlay'), j, i; //Открытие окна модального var openModal = function (e){ e.preventDefault(); var modal = document.querySelectorAll(this.getAttribute('data-target')); if (modal.length > 0) { modal[0].classList.add('modal-window-open'); } else { for (i = 0; i < modal.length; i++){ modal[i].classList.add('modal-window-open'); }; } }; //На все кнопки с data-target вешаем открытие окна for (i = 0; i < showButtons.length; i++){ var btn = showButtons[i]; btn.addEventListener('click', openModal); }; var closeModal = function (e){ e.preventDefault(); for(i = 0; i < closeButtons.length; i++){ var modalHide = document.querySelectorAll(this.getAttribute('data-hide')); if (true) { for (j = 0; j < modalHide.length; j++){ modalHide[j].classList.remove('modal-window-open'); }; } }; }; //На все кнопки с data-hide вешаем закрытие окна for (i = 0; i < closeButtons.length; i++){ var btnClose = closeButtons[i]; btnClose.addEventListener('click', closeModal); }; })();
Веб студия
Студия веб-дизайна
stdgrand.ru
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика