|
|
|
@ -8,6 +8,13 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button on:click={() => (showModal = true)}>Show Modal</button>
|
|
|
|
|
|
|
|
{#if showModal}
|
|
|
|
|
|
|
|
<div class="box" use:clickOutside on:outclick={handleOutclick}>
|
|
|
|
|
|
|
|
Click outside me!
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|
.box {
|
|
|
|
.box {
|
|
|
|
--width: 100px;
|
|
|
|
--width: 100px;
|
|
|
|
@ -24,10 +31,3 @@
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<button on:click={() => (showModal = true)}>Show Modal</button>
|
|
|
|
|
|
|
|
{#if showModal}
|
|
|
|
|
|
|
|
<div class="box" use:clickOutside on:outclick={handleOutclick}>
|
|
|
|
|
|
|
|
Click outside me!
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/if}
|
|
|
|
|