<script>
import Dialog from './Dialog.svelte';
let dialog
function openDialog() {
dialog.showModal()
dialog.addEventListener('click', function (event) {
let rect = dialog.getBoundingClientRect()
// dialogの内側判定
let isInDialog =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width
if (!isInDialog) {
dialog.close()
}
})
}
function closeDialog() {
dialog.close()
}
</script>
<button on:click={openDialog}>
open
</button>
<Dialog
bind:dialog
on:closeDialog={closeDialog}
/>