Fix modal close functionality
- Add proper closeModal() function - Fix close button (X) click handler - Fix click outside modal to close - Remove modal from DOM instead of just hiding - Improve modal user experience
This commit is contained in:
@@ -1788,7 +1788,7 @@
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2>${title}</h2>
|
<h2>${title}</h2>
|
||||||
<span class="close" onclick="closeModal()">×</span>
|
<span class="close">×</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
${content}
|
${content}
|
||||||
@@ -1797,6 +1797,19 @@
|
|||||||
`;
|
`;
|
||||||
document.body.appendChild(modal);
|
document.body.appendChild(modal);
|
||||||
modal.style.display = 'block';
|
modal.style.display = 'block';
|
||||||
|
|
||||||
|
// Add close functionality
|
||||||
|
const closeBtn = modal.querySelector('.close');
|
||||||
|
closeBtn.onclick = () => modal.remove();
|
||||||
|
|
||||||
|
modal.onclick = (e) => {
|
||||||
|
if (e.target === modal) modal.remove();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
const modals = document.querySelectorAll('.modal');
|
||||||
|
modals.forEach(modal => modal.remove());
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user