Modal

Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed.

Class	Type
`modals`	Modal	A class representing a modal

Components

Modals consist of five components:

Class	Type
`modal-form`	Form
`modal-header`	Header
`modal-title`	Title
`modal-content`	Content
`modal-footer`	Footer


      <button class="button"><span>Open Modal</span></button>

      <dialog class="modal" id="dialog">

        <form class="modal-form" method="dialog">

          <header class="modal-header">

            <div class="avatar is-color-orange is-medium">

              <span class="icon-exclamation" aria-hidden="true"></span>

            </div>

            <h4 class="modal-title heading-level-5">Modal title</h4>

            <button class="button is-text is-small is-only-icon" aria-label="Close modal">

              <span class="icon-x" aria-hidden="true"></span>

            </button>

          </header>

          <div class="modal-content u-small">Modal label text.</div>

          <div class="modal-footer">

            <div class="u-flex u-main-end u-gap-16">

              <button class="button is-text"><span class="text">Button</span></button>

              <button class="button is-secondary"><span class="text">Button</span></button>

            </div>

          </div>

        </form>

      </dialog>

To open or close a modal, use the native <dialog> element’s show(), showModal() and close() methods. For more information, please refer to the MDN documentation.

Sizes

In the Appwrite console, we use three sizes of modals:

class	Type
`is-small`	Small
-	Medium
`is-big`	Big


      <dialog id="dialog4" class="modal is-small" open>

        <form class="modal-form" method="dialog">

          <header class="modal-header">

            <h4 class="modal-title heading-level-5">Modal title</h4>

            <button class="button is-text is-small is-only-icon" aria-label="Close modal">

              <span class="icon-x" aria-hidden="true"></span>

            </button>

          </header>

          <div class="modal-content u-small">Modal label text.</div>

          <div class="modal-footer">

            <div class="u-flex u-main-end u-gap-16">

              <button class="button is-text"><span class="text">Button</span></button>

              <button class="button is-secondary"><span class="text">Button</span></button>

            </div>

          </div>

        </form>

      </dialog>

      <dialog id="dialog5" class="modal is-big" open>

        <form class="modal-form" method="dialog">

          <header class="modal-header">

            <h4 class="modal-title heading-level-5">Modal title</h4>

            <button class="button is-text is-small is-only-icon" aria-label="Close modal">

              <span class="icon-x" aria-hidden="true"></span>

            </button>

          </header>

          <div class="modal-content u-small">Modal label text.</div>

          <div class="modal-footer">

            <div class="u-flex u-main-end u-gap-16">

              <button class="button is-text"><span class="text">Button</span></button>

              <button class="button is-secondary"><span class="text">Button</span></button>

            </div>

          </div>

        </form>

      </dialog>

Best Practice

Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text.