Open
Description
I have this code.
<!DOCTYPE html>
<html>
<head>
<style>
/* Sanitize below copy from this repository. */
/* Interactive
* ========================================================================== */
/*
* Add the correct styles in Safari.
*/
:where(dialog) {
background-color: white;
border: solid;
color: black;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
</style>
</head>
<body>
<p style="margin-bottom: 1200px;">paragraph</p>
<button type="button" data-toggle="dialog" data-target="#my-dialog">
Open dialog
</button>
<dialog id="my-dialog">
<p>This is dialog.</p>
<p>
<input type="text" />
</p>
<button data-dismiss="dialog">Close</button>
</dialog>
<script>
function activateDialog(selector) {
const dialogE = document.querySelector(selector);
dialogE.showModal();
}
document.addEventListener("click", (event) => {
if (event.currentTarget?.activeElement?.dataset?.toggle === "dialog") {
console.debug(
'clicking on `data-toggle="dialog" element.',
event.currentTarget.activeElement,
)
event.stopPropagation()
let targetDialog = event.currentTarget.activeElement.dataset.target
if (targetDialog) {
activateDialog(targetDialog);
}
}
});
document.querySelector('[data-dismiss="dialog"]').addEventListener('click', (event) => {
event.stopPropagation();
let target = event.target;
if (target.closest('dialog')) {
target = target.closest('dialog');
}
console.debug('trying to close html dialog.', target);
target.close();
});
</script>
</body>
</html>
See it in action here.
The sanitize part showing (:where(dialog) {...}) is copied from this repository.
Scroll to the bottom of the page. Click on open dialog button.
When dialog opened, the page will be scroll to top if page height is too tall.
What I expect is dialog opened with modal (backdrop) and not scroll to top.
This will be working fine if I use dialog .show() but it is not with .showModal().
Metadata
Metadata
Assignees
Labels
No labels