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>