Hide Modal

Because there can only be one Modal at a time, you can call the hideModal function from anywhere and it will hide the currently active modal. You generally will not need to do this as the modal can be dismissed with a button on the modal as well as by clicking into tje overlay




Props


This function takes no props



Returns


void
Does not return anything.


<script>
  //__layout.svelte
  // The modal component is important and places in the root __layout.svelte component
  // <Modal />;

  import { Button, Modal, showModal, hideModal } from "bubbles-ui";
</script>

<Button
  label="Message Modal"
  wide={true}
  mb={true}
  onclick={() =>
    showModal("Message Modal", {
      message: "This is a message modal. Good for things like confirming a destructive action for the user",
      footer: [
        {
          label: "Close Modal",
          color: "gray-light",
          onclick: () => {
            hideModal();
          },
        },
      ],
    })}
/>

<Button
  label="Form Modal"
  wide={true}
  mb={true}
  onclick={() =>
    showModal("Form Modal", {
      message:
        "This is a form modal. It can have a message option too! Just add Form details just like you would with any other form. You can include the submit buttons in the form, which will cause them to not be locked at the bottom. Or you can include the submit buttons in the footer, which will cause the buttons to be sticky at the bottom of the modal.",
      form: [
        {
          type: "text",
          id: "name",
          label: "Name",
          error: "An error occurred",
          vob: "true",
          validation: "required|string",
        },
        {
          type: "button",
          label: "Submit",
          onsubmit: () => {
            hideModal();
          },
        },
      ],
    })}
/>