Пишу модальный диалог. В качестве примера взял этот диалог. Но делаю без bootstrap'a.
Единственное, что осталось реализовать, это эффект плавного закрытия.
Как это сделать правильно? Можно ли реализовать это только с помощью CSS? Или без JS никак?
И еще момент, как растянуть линии межу header, body, footer на всю длину блок?
function showModal() {
let div_modal = document.querySelector("div.modal");
let button_close = document.querySelector("button#close");
let button_yes = document.querySelector("button#yes");
let button_no = document.querySelector("button#no");
function window_onclick(event) {
if (event.target === div_modal) {
closeDialog();
}
}
window.addEventListener('click', window_onclick, false);
function button_yes_onclick(event) {
// setSignal(signal, value);
closeDialog();
}
button_yes.addEventListener('click', button_yes_onclick, false);
function button_no_onclick(event) {
closeDialog();
}
button_no.addEventListener('click', button_no_onclick, false);
button_close.addEventListener("click", button_no_onclick, false);
function closeDialog() {
div_modal.style.display = "none";
// Необходимо удалять назначенные обработчики, иначе они будут накапливаться.
// Для проверки можно использовать: getEventListeners(object) в консоли Chrome.
window.removeEventListener('click', window_onclick);
button_yes.removeEventListener('click', button_yes_onclick);
button_no.removeEventListener('click', button_no_onclick);
button_close.removeEventListener('click', button_no_onclick);
}
div_modal.style.display = "block"; // показать диалог
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 10px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
/*background-color: rgb(0, 0, 0); !* Fallback color *!*/
/*background-color: rgba(0, 0, 0, 0.5); !* Black w/ opacity *!*/
animation-name: show-modal;
animation-duration: 0.4s;
animation-fill-mode: forwards; /*сохранить результат анимации*/
}
@keyframes show-modal {
to {background-color: rgba(0, 0, 0, 0.5)}
}
/* Modal Content */
.modal-content {
position: relative;
background-color: white;
margin: auto;
padding: 0;
border: 10px solid white;
border-radius: 6px;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #333333;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: #cbcbcb;
float: right;
font-size: 28px;
font-weight: bold;
border: 0;
background-color: transparent;
}
.close:hover,
.close:focus {
color: #7f7f7f;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 0 16px;
line-height: 4em;
}
.modal-body {
padding: 10px 16px;
}
.modal-footer {
padding: 16px 16px 0 0; /*top right bottom left*/
text-align: right;
}
.modal-footer > button {
width: 62px;
height: 34px;
background-color: white;
border: 1px solid #cccccc;
border-radius: 4px;
}
.modal-footer > button:hover {
background-color: #e6e6e6;
cursor: pointer;
}
.line {
width: 100%;
border-bottom: 1px solid #e5e5e5;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>examole</title>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<button type="button" onclick="showModal()">Open Modal</button>
<!-- Modal -->
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<button class="close" id="close">×</button>
<h2>Подтверждение</h2>
</div>
<div class="line"></div>
<div class="modal-body">
<p>Вы уверены, что хотите изменить значение сигнала?</p>
</div>
<div class="line"></div>
<div class="modal-footer">
<button type="button" id="yes">Да</button>
<button type="button" id="no">Нет</button>
</div>
</div>
</div>
</div>
</body>
</html>