Multiple Modals On One Page

[GWoodmansey]

Hello Shinokada-san,

I’m developing engineering software that has a complicated interface. I’m using Svelte, Tailwinds, and Flowbite for the front end. I have some specific requirements for modals in my code.

The first thing I need is multiple modals from a single page. The code I have now looks like this:

<script>
  import { Button } from "flowbite-svelte";
  import { Modal } from "flowbite-svelte";

  let open = false;
</script>

<h1>Welcome to SvelteKit – Modal Test</h1>
<br />

<Button on:click={() => (open = true)}>Special Modal Button</Button>
<Modal title="My Dialog" bind:open>
  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
    I created this dialog!
  </p>
  <svelte:fragment slot="footer">
    <Button>O.K.</Button>
  </svelte:fragment>
</Modal>

<br />
<br />

<Button on:click={() => (open = true)}>Default modal</Button>
<Modal title="Terms of Service" bind:open>
  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
    With less than a month ...
  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
    The European Union’s General Data Protection Regulation ...
  </p>
  <svelte:fragment slot="footer">
    <Button>I accept</Button>
    <Button color="alternative">Decline</Button>
  </svelte:fragment>
</Modal>

This works, with one exception. Both buttons show the same dialog box.

What I should have is two independent modals that can be fired independently from each other. I can not get this working. What do you recommend?

Next issue I have is being able to fire a modal from from JavaScript code. I need this for complicated error checking that can only be done when multiple formulas are checked.

If you could get that working, and make an example that would be great.

Passing the modal size to the modal in your most recent update is a great improvement.

どうかよろしくお願いします。

Regards,

Gordon

P.S. I don’t speak Japanese well, but lived in Tokyo for three years!