Здравствуйте, есть вот такое модальное окошко, к которому добавил оверлей, а кнопку закрыть чет не получается прикрутить. Помогите, пожалуйста сделать ее кликабельной. HTML: <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> Код (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%); } Код (Javascript): 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'); } }) )
Код (Javascript): const accordion = element => { const close = el => el.classList.remove('accordion-item--active'); const open = el => el.classList.add('accordion-item--active'); const isActiveAccordion = el => el.classList.contains('accordion-item--active'); const closeEvent = (element, event) => { close(element); }; const openEvent = (element, event) => { document.querySelectorAll('.accordion-item').forEach(item => closeEvent(item, event)); open(element); }; const clickAccordionItemEvent = (element, event) => { isActiveAccordion(element) ? closeEvent(element, event) : openEvent(element, event) }; document.querySelectorAll(element).forEach(item => { const parent = item.parentNode; parent.querySelectorAll('.modal_close') .forEach(closeBtn => closeBtn.addEventListener('click', closeEvent.bind(null, parent))); item.addEventListener('click', clickAccordionItemEvent.bind(null, parent)); } ) }; accordion('.accordion-item__trigger')