Скрипт модального окна на чистом Javascript
В редакторе
Скрипт модального окна на чистом Javascript
Lorax
2348
2016-08-26 13:47:23
<!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);
};
})();
Войдите для добавления комментария.