Fix modal overlay sticking on page changes

- CSS now uses .open class instead of conflicting display:flex rule
- Simplified closeModal() - removed broken event.target checks
- Escape key calls closeModal() directly
- Removed stale style attribute from overlay div
master
Joca 2026-06-03 23:42:41 -03:00
parent 5979df3cb5
commit fcb04be887
Signed by: jocadbz
GPG Key ID: B1836DCE2F50BDF7
3 changed files with 11 additions and 12 deletions

View File

@ -1,20 +1,14 @@
function openModal() {
document.getElementById('modal-overlay').style.display = 'flex';
document.getElementById('modal-overlay').classList.add('open');
}
function closeModal(event) {
if (event && event.target !== document.getElementById('modal-overlay')) {
if (!event.target.classList.contains('modal-overlay')) return;
}
document.getElementById('modal-overlay').style.display = 'none';
function closeModal() {
document.getElementById('modal-overlay').classList.remove('open');
document.getElementById('modal-content').innerHTML = '';
}
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.getElementById('modal-overlay').style.display = 'none';
document.getElementById('modal-content').innerHTML = '';
}
if (e.key === 'Escape') closeModal();
});
document.body.addEventListener('htmx:afterSwap', function(evt) {

View File

@ -130,8 +130,13 @@ th { background: var(--surface); font-weight: 600; }
.modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: flex; align-items: center; justify-content: center;
z-index: 1000;
display: none;
}
.modal-overlay.open {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: var(--surface); border: 1px solid var(--border);

View File

@ -19,7 +19,7 @@
<main>
{{block "content" .}}{{end}}
</main>
<div id="modal-overlay" class="modal-overlay" onclick="closeModal(event)">
<div id="modal-overlay" class="modal-overlay" onclick="closeModal()">
<div id="modal-content" class="modal-content" onclick="event.stopPropagation()"></div>
</div>
<script src="/static/js/app.js"></script>