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 divmaster
parent
5979df3cb5
commit
fcb04be887
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue