You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/content/tutorial/12-actions/01-actions/app-a/App.svelte

33 lines
596 B

<script>
let showModal = true;
</script>
<button on:click={() => (showModal = true)}>Show Modal</button>
{#if showModal}
<div class="box" on:outclick={() => (showModal = false)}>
Click outside me!
</div>
{/if}
<style>
.box {
--width: 100px;
--height: 100px;
position: absolute;
width: var(--width);
height: var(--height);
left: calc(50% - var(--width) / 2);
top: calc(50% - var(--height) / 2);
display: flex;
align-items: center;
padding: 8px;
border-radius: 4px;
background-color: #ff3e00;
color: #fff;
text-align: center;
font-weight: bold;
}
</style>