Кнопка закрыть для модального окна
Здравствуйте, есть вот такое модальное окошко, к которому добавил оверлей, а кнопку закрыть чет не получается прикрутить. Помогите, пожалуйста сделать ее кликабельной.
<div class="accordion-item">
<div class="accordion-item__trigger">
<div class="modal__overlay"></div>
Открыть
</div>
<div class="accordion-item__content">
<div class="modal_close">X</div>
<div class="modal_content">
<h4>Профиль</h4>
<p>Текст</p>
</div>
</div>
</div>
.accordion-item {margin-bottom: 20px}
.modal__overlay {
opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; cursor: auto; width: 100vw; height: 100vh;
background: rgb(0,0,0,.4); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;
}
.modal_close {
position: absolute; top: 15px; right: 15px; font-size: 4em; color: grey; cursor: pointer; font-family: 'Comic Sans MS'; font-weight: normal;
transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg);
transition: filter linear .2s;-moz-transition:filter linear .2s;-webkit-transition:filter linear .2s;-o-transition: filter linear .2s;
}
.modal_close:hover {-webkit-filter: brightness(110%)}
.accordion-item__trigger {padding: 20px; border: 1px solid black;}
.accordion-item__content {
position: fixed; top: 50%; left: 50%; min-height: 200px; max-height: 90%; width: 90%; max-width: 500px;
opacity: 0; visibility: hidden; overflow-y: auto; z-index: 3; text-align: center;
background: #E3EDE9; box-shadow: 0 0 0 6px rgba(0,0,0,.1); border: 2px solid #666; border-radius: 7px;
transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all;
transform: translate(-50%, -200%); -webkit-transform: translate(-50%, -200%); -moz-transform: translate(-50%, -200%); -ms-transform: translate(-50%, -200%);
}
.accordion-item--active .modal__overlay {opacity: 1; visibility: visible;}
.accordion-item--active .accordion-item__trigger {background-color: #ccc;}
.accordion-item--active .accordion-item__content {
opacity: 1; visibility: visible;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
}
document.querySelectorAll('.accordion-item__trigger').forEach((item) =>
item.addEventListener('click', () => {
const parent = item.parentNode;
if (parent.classList.contains('accordion-item--active')) {
parent.classList.remove('accordion-item--active');
} else {
document
.querySelectorAll('.accordion-item')
.forEach((child) => child.classList.remove('accordion-item--active'))
parent.classList.add('accordion-item--active');
}
})
)
|
hunter0k,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.accordion-item {
margin-bottom: 20px
}
.modal__overlay {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
cursor: auto;
width: 100vw;
height: 100vh;
background: rgb(0, 0, 0, .4);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.modal_close {
position: absolute;
top: 15px;
right: 15px;
font-size: 4em;
color: grey;
cursor: pointer;
font-family: 'Comic Sans MS';
font-weight: normal;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transition: filter linear .2s;
-moz-transition: filter linear .2s;
-webkit-transition: filter linear .2s;
-o-transition: filter linear .2s;
}
.modal_close:hover {
-webkit-filter: brightness(110%)
}
.accordion-item__trigger {
padding: 20px;
border: 1px solid black;
}
.accordion-item__content {
position: fixed;
top: 50%;
left: 50%;
min-height: 200px;
max-height: 90%;
width: 90%;
max-width: 500px;
opacity: 0;
visibility: hidden;
overflow-y: auto;
z-index: 3;
text-align: center;
background: #E3EDE9;
box-shadow: 0 0 0 6px rgba(0, 0, 0, .1);
border: 2px solid #666;
border-radius: 7px;
transition: 0.3s all;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-ms-transition: 0.3s all;
transform: translate(-50%, -200%);
-webkit-transform: translate(-50%, -200%);
-moz-transform: translate(-50%, -200%);
-ms-transform: translate(-50%, -200%);
}
.accordion-item--active .modal__overlay {
opacity: 1;
visibility: visible;
}
.accordion-item--active .accordion-item__trigger {
background-color: #ccc;
}
.accordion-item--active .accordion-item__content {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.accordion-item').forEach((item) =>
item.addEventListener('click', ({
target
}) => {
if (target.closest('.accordion-item__trigger')) {
item.classList.toggle('accordion-item--active')
}
if (target.closest('.modal_close')) {
item.classList.remove('accordion-item--active');
}
})
)
})
</script>
</head>
<body>
<div class="accordion-item">
<div class="accordion-item__trigger">
<div class="modal__overlay"></div>
Открыть
</div>
<div class="accordion-item__content">
<div class="modal_close">X</div>
<div class="modal_content">
<h4>Профиль</h4>
<p>Текст</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item__trigger">
<div class="modal__overlay"></div>
Открыть 2
</div>
<div class="accordion-item__content">
<div class="modal_close">X 2</div>
<div class="modal_content">
<h4>Профиль 2</h4>
<p>Текст 2</p>
</div>
</div>
</div>
</body>
</html>
|
Спасибо большое.
|
| Часовой пояс GMT +3, время: 07:48. |