modal instead of navigation

+page.svelte

<script lang="ts">
	import { beforeNavigate } from '$app/navigation';
	import { page } from '$app/stores';
	import type { PageData } from './$types';
	export let data: PageData;
	let dialog: HTMLDialogElement;
	let image_id: number;
	beforeNavigate(({ to, cancel }) => {
		dialog?.close();
		if (to?.route.id == '/images/[...id]') {
			cancel();
			// changes the url
			history.pushState(null, '', to?.url.toString());
			// set the id to whatever the id is
			image_id = to.params!.id as unknown as number;
			// show the modal
			dialog.showModal();
		}
	});
</script>

<pre>{JSON.stringify($page.params)}</pre>

<svelte:window on:popstate={() => dialog?.close()} />

<ul>
	{#each [1, 2, 3, 4] as id}
		<li><a href="/images/{id}">open {id}</a></li>
	{/each}
</ul>
<dialog bind:this={dialog}>
	<div>
		Wop wop {image_id}
		<button on:click={() => dialog.close()}>Close</button>
	</div>
</dialog>