|
|
|
@ -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;
|
|
|
|
@ -23,11 +30,4 @@
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
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}
|
|
|
|
|