search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Modal

    Tailwind CSS Modal / Dialog

    Use responsive modal component with helper examples for modal ui, popup, open modal, full screen modal, center position & more. Open source license.

    Required ES init: Modal *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW Elements ES format then you should pass the required components to the initTWE method.

    Basic Example

    Modals are separate windows within an application, most often as a dialog box. They are a common user interface pattern for providing information or requiring confirmation.

    In order to create a modal you only have to add data-twe-toggle="modal" data attribute where modal is the id of the modal that you are targeting.

    Make sure that you also have aria-hidden="true" applied as an attribute when the modal is hidden by default.

    Modal title
    Modal body text goes here.
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModal"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Launch demo modal
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalLabel">
                    Modal title
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative flex-auto p-4" data-twe-modal-body-ref>
                  Modal body text goes here.
                </div>
    
                <!-- Modal footer -->
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Modal components

    Below is a static modal example (meaning its position was set to static and display have been changed to block). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

    Modal title
    Modal body text goes here.
    • HTML
    • javascript
            
                
          <!-- Modal -->
          <div
            data-twe-modal-init
            data-twe-backdrop="false"
            class="static left-0 top-0 z-[1055] block h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalComponents"
            tabindex="-1"
            aria-labelledby="exampleModalComponentsLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto opacity-100 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:my-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalComponentsLabel">
                    Modal title
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div class="relative flex-auto p-4" data-twe-modal-body-ref>
                  Modal body text goes here.
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Positions

    Use four different modal positions. These are presets - if you want to, you are able to modify classes on your own to create more custom directions.

    Be always up to date

    Do you want to receive the push notification about the newest posts?

    Product in the cart

    Do you need more time to make a purchase decision?

    No pressure, your product will be waiting for you in the cart.

    Related article

    Doloremque vero ex debitis veritatis?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod itaque voluptate nesciunt laborum incidunt. Officia, quam consectetur. Earum eligendi aliquam illum alias.

    Subscribe
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#leftTopModal"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Top Left
          </button>
    
          <!-- Modal top left -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="leftTopModal"
            tabindex="-1"
            aria-labelledby="leftTopModalLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none absolute left-7 h-auto w-full translate-x-[-100%] opacity-0 transition-all duration-300 ease-in-out max-[576px]:left-auto min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md bg-primary-600 p-4 dark:border-b dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-white"
                    id="leftTopModalLabel">
                    Be always up to date
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-400 hover:text-neutral-300 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div
                  class="relative flex flex-auto flex-wrap justify-center p-4"
                  data-twe-modal-body-ref>
                  <span class="text-primary [&>svg]:h-16 [&>svg]:w-14">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <p class="p-4 text-center">
                    Do you want to receive the push notification about the newest
                    posts?
                  </p>
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-center rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    No
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Yes
                  </button>
                </div>
              </div>
            </div>
          </div>
    
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#rightTopModal"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Top Right
          </button>
    
          <!-- Modal top right-->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="rightTopModal"
            tabindex="-1"
            aria-labelledby="rightTopModalLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none absolute right-7 h-auto w-full translate-x-full opacity-0 transition-all duration-300 ease-in-out max-[576px]:right-auto min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md bg-info-600 p-4 dark:border-b dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-white"
                    id="rightTopModalLabel">
                    Product in the cart
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-300/60 hover:text-neutral-300 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div class="relative flex flex-auto p-4" data-twe-modal-body-ref>
                  <span class="text-info-600 [&>svg]:h-16 [&>svg]:w-20">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" />
                    </svg>
                  </span>
                  <div class="ms-8">
                    <p class="my-4">
                      Do you need more time to make a purchase decision?
                    </p>
                    <p class="my-4">
                      No pressure, your product will be waiting for you in the cart.
                    </p>
                  </div>
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="me-2 inline-block rounded bg-info px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Go to the cart
                  </button>
                  <button
                    type="button"
                    class="inline-block rounded border-2 border-info px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-info transition duration-150 ease-in-out hover:border-info-600 hover:bg-info-50/50 hover:text-info-600 focus:border-info-600 focus:bg-info-50/50 focus:text-info-600 focus:outline-none focus:ring-0 active:border-info-700 active:text-info-700 dark:hover:bg-cyan-950 dark:focus:bg-cyan-950"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                </div>
              </div>
            </div>
          </div>
    
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#rightBottomModal"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Bottom Right
          </button>
    
          <!-- Modal bottom right -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="rightBottomModal"
            tabindex="-1"
            aria-labelledby="rightBottomModalLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none absolute bottom-7 right-7 h-auto w-full translate-x-full opacity-0 transition-all duration-300 ease-in-out max-[576px]:right-auto min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md bg-primary-600 p-4 dark:border-b dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-white"
                    id="rightBottomModalLabel">
                    Related article
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-400 hover:text-neutral-300 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div
                  class="relative grid flex-auto grid-cols-2 p-4"
                  data-twe-modal-body-ref>
                  <div>
                    <div
                      class="relative w-full overflow-hidden bg-cover bg-no-repeat"
                      data-twe-ripple-init
                      data-twe-ripple-color="light">
                      <img
                        src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
                        class="w-full" />
                      <div
                        class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
                        style="background-color:  rgba(251, 251, 251, 0.15)"></div>
                    </div>
                  </div>
                  <div class="ps-6">
                    <p class="mb-4 font-bold">
                      Doloremque vero ex debitis veritatis?
                    </p>
                    <p class="mb-8 text-neutral-500/80 dark:text-neutral-400">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
                      itaque voluptate nesciunt laborum incidunt. Officia, quam
                      consectetur. Earum eligendi aliquam illum alias.
                    </p>
                  </div>
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Read more
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                </div>
              </div>
            </div>
          </div>
    
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#leftBottomModal"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Bottom Left
          </button>
    
          <!-- Modal bottom left -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="leftBottomModal"
            tabindex="-1"
            aria-labelledby="leftBottomModalLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none absolute bottom-7 left-7 h-auto w-full translate-x-[-100%] opacity-0 transition-all duration-300 ease-in-out max-[576px]:left-auto min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b border-neutral-200 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="leftBottomModalLabel">
                    Subscribe
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div class="relative flex-auto p-4" data-twe-modal-body-ref>
                  <form>
                    <!--Name input-->
                    <div class="relative mb-3" data-twe-input-wrapper-init>
                      <input
                        type="text"
                        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
                        id="exampleFormControlInput1"
                        placeholder="Name" />
                      <label
                        for="exampleFormControlInput1"
                        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
                        >Name
                      </label>
                    </div>
    
                    <!--Email input-->
                    <div class="relative mb-3" data-twe-input-wrapper-init>
                      <input
                        type="text"
                        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
                        id="exampleFormControlInput1"
                        placeholder="Email address" />
                      <label
                        for="exampleFormControlInput1"
                        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
                        >Email address
                      </label>
                    </div>
    
                    <!--Default checked checkbox-->
                    <div
                      class="mb-6 flex min-h-[1.5rem] items-center justify-center ps-[1.5rem]">
                      <input
                        class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right dark:border-neutral-400 dark:checked:border-primary dark:checked:bg-primary"
                        type="checkbox"
                        value=""
                        checked
                        id="exampleCheck11" />
                      <label
                        class="inline-block ps-[0.15rem] hover:cursor-pointer"
                        for="exampleCheck11">
                        I have read and agree to the terms
                      </label>
                    </div>
    
                    <!--Submit button-->
                    <button
                      type="submit"
                      class="inline-block w-full rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                      data-twe-ripple-init
                      data-twe-ripple-color="light">
                      Subscribe
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Frame

    You can make the modal "frame-like" when by changing the position classes of the modal wrapper

    v52gs1

    We have a gift for you! Use this code to get a 10% discount.

    We use cookies to improve your website experience

    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleFrameTopModal"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Frame top
          </button>
    
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleFrameBottomModal"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Frame bottom
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleFrameTopModal"
            tabindex="-1"
            aria-labelledby="exampleFrameTopModalLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-full translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out">
              <div
                class="pointer-events-auto relative flex w-full flex-col border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div class="relative flex-auto py-1" data-twe-modal-body-ref>
                  <div class="my-4 flex items-center justify-center">
                    <h4>
                      <span
                        class="inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-baseline text-[18px] font-bold leading-none text-primary-700 dark:bg-slate-900 dark:text-primary-500"
                        >v52gs1</span
                      >
                    </h4>
                    <p class="mx-6 my-4">
                      We have a gift for you! Use this code to get a
                      <strong>10% discount</strong>.
                    </p>
                    <button
                      type="button"
                      class="inline-block rounded bg-primary px-4 py-1.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
                      Use it
                    </button>
                    <button
                      type="button"
                      class="ms-2 inline-block rounded bg-info px-4 py-1.5 text-xs font-medium uppercase leading-normal text-white shadow-info-3 transition duration-150 ease-in-out hover:bg-info-accent-300 hover:shadow-info-2 focus:bg-info-accent-300 focus:shadow-info-2 focus:outline-none focus:ring-0 active:bg-info-600 active:shadow-info-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                      data-twe-modal-dismiss>
                      No, thanks
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-hidden outline-none"
            id="exampleFrameBottomModal"
            tabindex="-1"
            aria-labelledby="exampleFrameBottomModalLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none absolute bottom-0 w-full translate-y-[50px] opacity-0 transition-all duration-300 ease-in-out">
              <div
                class="pointer-events-auto relative flex w-full flex-col border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div class="relative flex-auto py-1" data-twe-modal-body-ref>
                  <div class="my-4 flex items-center justify-center">
                    <p>We use cookies to improve your website experience</p>
                    <button
                      type="button"
                      class="ms-2 inline-block rounded bg-success px-4 py-1.5 text-xs font-medium uppercase leading-normal text-white shadow-success-3 transition duration-150 ease-in-out hover:bg-success-accent-300 hover:shadow-success-2 focus:bg-success-accent-300 focus:shadow-success-2 focus:outline-none focus:ring-0 active:bg-success-600 active:shadow-success-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                      data-twe-modal-dismiss>
                      Ok, thanks
                    </button>
                    <button
                      type="button"
                      class="ms-2 inline-block rounded bg-primary px-4 py-1.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
                      Learn more
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Static backdrop

    Set backdrop to static so the modal doesn't close when you click outside of it.

    Modal title
    ...
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#staticBackdrop"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Launch static backdrop modal
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="staticBackdrop"
            data-twe-backdrop="static"
            data-twe-keyboard="false"
            tabindex="-1"
            aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <!--Modal title-->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalLabel">
                    Modal title
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div
                  class="relative flex justify-center p-4"
                  data-twe-modal-body-ref>
                  ...
                </div>
    
                <!-- Modal footer -->
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Understood
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Scrolling long content

    When modals become too long for the users viewport or device, they scroll independent of the page itself.

    Modal title
    This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalLong"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Launch demo modal long
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalLong"
            tabindex="-1"
            aria-labelledby="exampleModalLongLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <!-- Modal title -->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalLongLabel">
                    Modal title
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative p-4" style="min-height: 1500px">
                  This is some placeholder content to show the scrolling behavior
                  for modals. Instead of repeating the text the modal, we use an
                  inline style set a minimum height, thereby extending the length of
                  the overall modal and demonstrating the overflow scrolling. When
                  content becomes longer than the height of the viewport, scrolling
                  will move the modal as needed.
                </div>
    
                <!-- Modal footer -->
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Modal dialog scrollable

    Create a scrollable modal that allows scroll the modal body by adding .overflow-y-auto.

    Modal title

    This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.

    This content should appear at the bottom after you scroll.

    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalScrollable"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Launch demo modal dialog scrollable
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalScrollable"
            tabindex="-1"
            aria-labelledby="exampleModalScrollableLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative h-[calc(100%-1rem)] w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex max-h-[100%] w-full flex-col overflow-hidden rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <!-- Modal title -->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalScrollableLabel">
                    Modal title
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative overflow-y-auto p-4">
                  <p>
                    This is some placeholder content to show the scrolling behavior
                    for modals. We use repeated line breaks to demonstrate how
                    content can exceed minimum inner height, thereby showing inner
                    scrolling. When content becomes longer than the predefined
                    max-height of modal, content will be cropped and scrollable
                    within the modal.
                  </p>
                  <div style="height:800px;"></div>
                  <p>This content should appear at the bottom after you scroll.</p>
                </div>
    
                <!-- Modal footer -->
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Vertically centered

    Use .fixed, .top-0 and .left-0 to vertically center the modal.

    Modal title

    This is a vertically centered modal.

    Modal title

    This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.











    Just like that.

    • HTML
    • javascript
            
                
          <div class="space-y-2">
            <!-- Button trigger vertically centered modal-->
            <button
              type="button"
              class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
              data-twe-toggle="modal"
              data-twe-target="#exampleModalCenter"
              data-twe-ripple-init
              data-twe-ripple-color="light">
              Vertically centered modal
            </button>
    
            <!--Button trigger vertically centered scrollable modal-->
            <button
              type="button"
              class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
              data-twe-toggle="modal"
              data-twe-target="#exampleModalCenteredScrollable"
              data-twe-ripple-init
              data-twe-ripple-color="light">
              Vertically centered scrollable modal
            </button>
          </div>
    
          <!--Vertically centered modal-->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalCenter"
            tabindex="-1"
            aria-labelledby="exampleModalCenterTitle"
            aria-modal="true"
            role="dialog">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <!-- Modal title -->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalCenterTitle">
                    Modal title
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative p-4">
                  <p>This is a vertically centered modal.</p>
                </div>
    
                <!-- Modal footer -->
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
    
          <!--Verically centered scrollable modal-->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalCenteredScrollable"
            tabindex="-1"
            aria-labelledby="exampleModalCenteredScrollableLabel"
            aria-modal="true"
            role="dialog">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <!-- Modal title -->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalCenteredScrollableLabel">
                    Modal title
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative p-4">
                  <p>
                    This is some placeholder content to show a vertically centered
                    modal. We've added some extra copy here to show how vertically
                    centering the modal works when combined with scrollable modals.
                    We also use some repeated line breaks to quickly extend the
                    height of the content, thereby triggering the scrolling. When
                    content becomes longer than the predefined max-height of modal,
                    content will be cropped and scrollable within the modal.
                  </p>
                  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                  <p>Just like that.</p>
                </div>
    
                <!-- Modal footer -->
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Tooltips and popovers

    Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

    Modal title
    Popover in a modal
    This triggers a popover on click.

    Tooltips in a modal

    This link and that link have tooltips on hover.

    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalTips"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Launch demo modal
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalTips"
            tabindex="-1"
            aria-labelledby="exampleModalTipsLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalTipsLabel">
                    Modal title
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div
                  class="relative flex-auto p-4 text-center"
                  data-twe-modal-body-ref>
                  <h5 class="mb-2 text-xl font-bold">Popover in a modal</h5>
                  <div class="mb-4 flex items-center justify-center gap-1">
                    This
                    <button
                      type="button"
                      class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                      data-twe-toggle="popover"
                      data-twe-title="Popover title"
                      data-twe-content="Popover body content is set in this attribute."
                      data-twe-ripple-init
                      data-twe-ripple-color="light">
                      button
                    </button>
                    triggers a popover on click.
                  </div>
                  <hr class="my-4 dark:border-neutral-500" />
                  <h5 class="mb-2 text-xl font-bold">Tooltips in a modal</h5>
                  <p class="mb-4">
                    <a
                      href="#"
                      class="transititext-primary text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
                      data-twe-toggle="tooltip"
                      title="Tooltip"
                      >This link</a
                    >
                    and
                    <a
                      href="#"
                      class="transititext-primary text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
                      data-twe-toggle="tooltip"
                      title="Tooltip"
                      >that link</a
                    >
                    have tooltips on hover.
                  </p>
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            Tooltip,
            Popover,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple, Tooltip, Popover });
          
            
        

    Varying modal content

    Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-twe-* attributes to vary the contents of the modal depending on which button was clicked.

    Below is a live demo followed by example HTML and JavaScript.

    New message to
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalVarying"
            data-twe-whatever="@mdo"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Open modal for @mdo
          </button>
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalVarying"
            data-twe-whatever="@fat"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Open modal for @fat
          </button>
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalVarying"
            data-twe-whatever="@getbootstrap"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Open modal for @getbootstrap
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalVarying"
            tabindex="-1"
            aria-labelledby="exampleModalVaryingLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalVaryingLabel">
                    New message to
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div class="relative flex-auto p-4" data-twe-modal-body-ref>
                  <form>
                    <div class="mb-3">
                      <label
                        for="recipient-name"
                        class="text-neutral-500 dark:text-neutral-400"
                        >Recipient:</label
                      >
                      <input
                        type="text"
                        class="relative m-0 -me-0.5 block w-full flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-inset focus:outline-none dark:border-neutral-500 dark:bg-body-dark dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:focus:border-primary"
                        id="recipient-name" />
                    </div>
                    <div class="mb-3">
                      <label
                        for="message-text"
                        class="text-neutral-500 dark:text-neutral-400"
                        >Message:</label
                      >
                      <textarea
                        class="relative m-0 -me-0.5 block w-full flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-inset focus:outline-none dark:border-neutral-500 dark:bg-body-dark dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
                        id="message-text"></textarea>
                    </div>
                  </form>
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
    
          const exampleModal = document.getElementById('exampleModalVarying');
          exampleModal.addEventListener('show.twe.modal', (e) => {
            // Button that triggered the modal
            const button = e.relatedTarget;
            // Extract info from data-twe-* attributes
            const recipient = button.getAttribute('data-twe-whatever');
            // If necessary, you could initiate an AJAX request here
            // and then do the updating in a callback.
            //
            // Update the modal's content.
            const modalTitle = exampleModal.querySelector('#exampleModalVaryingLabel');
            const modalBodyInput = exampleModal.querySelector('[data-twe-modal-body-ref] input');
    
            modalTitle.textContent = `New message to ${recipient}`;
            modalBodyInput.value = recipient;
          })
          
            
        

    Toggle between modals

    Toggle between multiple modals with some clever placement of the data-twe-target and data-twe-toggle attributes. For example, you could toggle a password reset modal from within an already open sign in modal.

    Below is a live demo followed by example HTML and JavaScript. For more information, read the modal API/events doc for details on relatedTarget.

    Modal 1
    Show a second modal and hide this one with the button below.
    Modal 2
    Hide this modal and show the first with the button below.
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalFirst"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Open first modal
          </button>
    
          <!-- First Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalFirst"
            tabindex="-1"
            aria-labelledby="exampleModalFirstLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalFirstLabel">
                    Modal 1
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div class="relative flex-auto p-4" data-twe-modal-body-ref>
                  Show a second modal and hide this one with the button below.
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <span data-twe-modal-dismiss>
                    <button
                      type="button"
                      class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                      data-twe-ripple-init
                      data-twe-ripple-color="light"
                      data-twe-toggle="modal"
                      data-twe-target="#exampleModalSecond">
                      Open second modal
                    </button>
                  </span>
                </div>
              </div>
            </div>
          </div>
    
          <!-- Second Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalSecond"
            tabindex="-1"
            aria-labelledby="exampleModalSecondLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalSecondLabel">
                    Modal 2
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div class="relative flex-auto p-4" data-twe-modal-body-ref>
                  Hide this modal and show the first with the button below.
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <span data-twe-modal-dismiss>
                    <button
                      type="button"
                      class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                      data-twe-ripple-init
                      data-twe-ripple-color="light"
                      data-twe-toggle="modal"
                      data-twe-target="#exampleModalFirst">
                      Open first modal
                    </button>
                  </span>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Button with icon

    Set backdrop to static so the modal doesn't close when you click outside of it.

    Title
    ...
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="rounded-full bg-primary p-3 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalWithIcon"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            <span class="[&>svg]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 01.75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 019.75 22.5a.75.75 0 01-.75-.75v-4.131A15.838 15.838 0 016.382 15H2.25a.75.75 0 01-.75-.75 6.75 6.75 0 017.815-6.666zM15 6.75a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z"
                  clip-rule="evenodd" />
                <path
                  d="M5.26 17.242a.75.75 0 10-.897-1.203 5.243 5.243 0 00-2.05 5.022.75.75 0 00.625.627 5.243 5.243 0 005.022-2.051.75.75 0 10-1.202-.897 3.744 3.744 0 01-3.008 1.51c0-1.23.592-2.323 1.51-3.008z" />
              </svg>
            </span>
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalWithIcon"
            tabindex="-1"
            aria-labelledby="exampleModalWithIconLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalWithIconLabel">
                    Title
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div class="relative flex-auto p-4" data-twe-modal-body-ref>
                  ...
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Sizes

    Use four different modal sizing options starting from small to extra large. Width of these modals will remain responsive when browsing on smaller devices.

    Extra large modal
    ...
    Large modal
    ...
    Small modal
    ...
    • HTML
    • javascript
            
                
          <div class="space-y-2">
            <!--Button trigger extra large modal-->
            <button
              type="button"
              class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
              data-twe-toggle="modal"
              data-twe-target="#exampleModalXl"
              data-twe-ripple-init
              data-twe-ripple-color="light">
              Extra large modal
            </button>
    
            <!--Button trigger large modal-->
            <button
              type="button"
              class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
              data-twe-toggle="modal"
              data-twe-target="#exampleModalLg"
              data-twe-ripple-init
              data-twe-ripple-color="light">
              Large modal
            </button>
    
            <!--Button trigger small modal-->
            <button
              type="button"
              class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
              data-twe-toggle="modal"
              data-twe-target="#exampleModalSm"
              data-twe-ripple-init
              data-twe-ripple-color="light">
              Small modal
            </button>
          </div>
    
          <!--Extra large modal-->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalXl"
            tabindex="-1"
            aria-labelledby="exampleModalXlLabel"
            aria-modal="true"
            role="dialog">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px] min-[992px]:max-w-[800px] min-[1200px]:max-w-[1140px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <!-- Modal title -->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalXlLabel">
                    Extra large modal
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative p-4">...</div>
              </div>
            </div>
          </div>
    
          <!--Large modal-->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalLg"
            tabindex="-1"
            aria-labelledby="exampleModalLgLabel"
            aria-modal="true"
            role="dialog">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px] min-[992px]:max-w-[800px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <!-- Modal title -->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalLgLabel">
                    Large modal
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative p-4">...</div>
              </div>
            </div>
          </div>
    
          <!--Small modal-->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalSm"
            tabindex="-1"
            aria-labelledby="exampleModalSmLabel"
            aria-modal="true"
            role="dialog">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[300px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <!-- Modal title -->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalSmLabel">
                    Small modal
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative p-4">...</div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Fullscreen modal

    Use .h-full and .w-full to create fullscreen modal.

    Modal title

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique nesciunt repellat consectetur rem nam, facere, expedita perspiciatis accusamus beatae aliquid dicta fugit ab minima qui inventore. Animi tenetur tempore consequuntur! Ducimus, praesentium, debitis iusto repellendus deleniti molestias quod vero laboriosam deserunt itaque, voluptatum labore nihil vitae repudiandae doloribus exercitationem at aliquam! Nesciunt voluptatum temporibus excepturi dolores incidunt laudantium odio debitis. Dicta totam sunt quo corrupti accusamus et animi ratione consequatur molestias explicabo hic eligendi necessitatibus laudantium, neque velit beatae magni. Nemo vero blanditiis illum numquam libero necessitatibus fugiat officiis repellendus. Optio, quis. Earum corporis vero debitis unde rerum quod fuga, modi culpa veniam quos, quisquam soluta ea voluptatum aliquam aperiam, vitae sint molestias? Cupiditate quibusdam repudiandae, sapiente distinctio nihil sunt. Aspernatur quas sapiente saepe quo autem ullam voluptatem deleniti dolorum fugit tenetur incidunt obcaecati suscipit adipisci in nulla quam ipsam enim facilis, corrupti alias rem? Velit voluptatum recusandae officiis modi. Minus molestiae consequatur assumenda reiciendis aperiam, eius iure repellendus. Vel fugiat fuga quasi eos adipisci rem, necessitatibus odit eius, quidem mollitia eum nesciunt officiis assumenda ab laudantium reprehenderit quia! Consequuntur? Porro, nostrum et dicta quo sint non sed officia voluptatem labore, laborum dolores quos dolorem corporis iusto libero vel voluptate aliquid obcaecati distinctio itaque optio, nihil magni temporibus. Error, temporibus? Dolor, non? Adipisci nesciunt deleniti beatae esse fugiat, quisquam minus eaque animi dolor aliquam aperiam. Consequatur tempora amet fugit praesentium iste culpa quo, quaerat perspiciatis deserunt quia nisi dolores ipsum? Nemo incidunt quae nulla inventore aliquam alias natus iure! Similique omnis enim esse praesentium est veniam dolor maxime. Reprehenderit molestias cumque fugit dignissimos sunt sequi enim. Adipisci beatae blanditiis dolores. Laudantium placeat, asperiores tenetur praesentium beatae dignissimos magni voluptate iusto dicta unde iste, ratione est sint eius fuga consequatur eligendi iure provident. Consequuntur nobis quaerat error est quos obcaecati exercitationem. Necessitatibus sunt praesentium reiciendis tempora maiores? Asperiores similique, natus sed quasi ut repudiandae aliquid deserunt tempore eligendi repellat hic iusto eveniet neque quisquam, nulla porro, eum magni repellendus minima eaque! Perspiciatis omnis odio architecto recusandae quaerat harum vel ducimus ullam. Officiis dolores sapiente nihil architecto veritatis quos provident necessitatibus! Nostrum fugiat nisi placeat aspernatur deleniti explicabo ab omnis odio. Ratione. Temporibus sunt nihil expedita corrupti reiciendis, asperiores nostrum amet quam, totam ut maiores magni saepe dolore at consectetur. Autem illum quos cum perferendis quia voluptatibus tempore beatae quidem accusantium temporibus. Magnam fugiat vero maiores, repellendus, ex quaerat esse sunt eum itaque nihil pariatur laborum expedita veniam dolorum reprehenderit nostrum accusantium autem! Consequatur animi, quam numquam pariatur et quia odit ad. Porro provident excepturi veniam exercitationem cumque deleniti aperiam! Laudantium fugit magni, accusantium velit ipsa nostrum minima temporibus distinctio cum minus quis voluptas expedita ad porro quam earum fugiat, suscipit eius! Culpa vitae dolores labore fugit necessitatibus similique ex ipsa? Dolorem earum quia debitis quod suscipit aut nesciunt, necessitatibus error laborum quasi nisi a cumque asperiores voluptate, expedita, officiis perspiciatis ex! Ipsam optio quo deserunt magni cupiditate exercitationem voluptas? Animi in asperiores quos minima a, deleniti, facere vel ratione aut recusandae est voluptate minus. Reiciendis eius doloremque magni, sit harum voluptatem? Consectetur ad cum, rerum itaque veniam laudantium eligendi ut tenetur mollitia nihil praesentium voluptatem, aspernatur, dolorem modi?

    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalFullscreen"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Launch demo modal full screen
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalFullscreen"
            tabindex="-1"
            aria-labelledby="exampleModalFullscreenLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[0px]:m-0 min-[0px]:h-full min-[0px]:max-w-none">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark min-[0px]:h-full min-[0px]:rounded-none min-[0px]:border-0">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10 min-[0px]:rounded-none">
                  <!-- Modal title -->
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalFullscreenLabel">
                    Modal title
                  </h5>
                  <!-- Close button -->
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
    
                <!-- Modal body -->
                <div class="relative p-4 min-[0px]:overflow-y-auto">
                  <p class="px-10 text-center leading-[3rem]">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    Similique nesciunt repellat consectetur rem nam, facere,
                    expedita perspiciatis accusamus beatae aliquid dicta fugit ab
                    minima qui inventore. Animi tenetur tempore consequuntur!
                    Ducimus, praesentium, debitis iusto repellendus deleniti
                    molestias quod vero laboriosam deserunt itaque, voluptatum
                    labore nihil vitae repudiandae doloribus exercitationem at
                    aliquam! Nesciunt voluptatum temporibus excepturi dolores
                    incidunt laudantium odio debitis. Dicta totam sunt quo corrupti
                    accusamus et animi ratione consequatur molestias explicabo hic
                    eligendi necessitatibus laudantium, neque velit beatae magni.
                    Nemo vero blanditiis illum numquam libero necessitatibus fugiat
                    officiis repellendus. Optio, quis. Earum corporis vero debitis
                    unde rerum quod fuga, modi culpa veniam quos, quisquam soluta ea
                    voluptatum aliquam aperiam, vitae sint molestias? Cupiditate
                    quibusdam repudiandae, sapiente distinctio nihil sunt.
                    Aspernatur quas sapiente saepe quo autem ullam voluptatem
                    deleniti dolorum fugit tenetur incidunt obcaecati suscipit
                    adipisci in nulla quam ipsam enim facilis, corrupti alias rem?
                    Velit voluptatum recusandae officiis modi. Minus molestiae
                    consequatur assumenda reiciendis aperiam, eius iure repellendus.
                    Vel fugiat fuga quasi eos adipisci rem, necessitatibus odit
                    eius, quidem mollitia eum nesciunt officiis assumenda ab
                    laudantium reprehenderit quia! Consequuntur? Porro, nostrum et
                    dicta quo sint non sed officia voluptatem labore, laborum
                    dolores quos dolorem corporis iusto libero vel voluptate aliquid
                    obcaecati distinctio itaque optio, nihil magni temporibus.
                    Error, temporibus? Dolor, non? Adipisci nesciunt deleniti beatae
                    esse fugiat, quisquam minus eaque animi dolor aliquam aperiam.
                    Consequatur tempora amet fugit praesentium iste culpa quo,
                    quaerat perspiciatis deserunt quia nisi dolores ipsum? Nemo
                    incidunt quae nulla inventore aliquam alias natus iure!
                    Similique omnis enim esse praesentium est veniam dolor maxime.
                    Reprehenderit molestias cumque fugit dignissimos sunt sequi
                    enim. Adipisci beatae blanditiis dolores. Laudantium placeat,
                    asperiores tenetur praesentium beatae dignissimos magni
                    voluptate iusto dicta unde iste, ratione est sint eius fuga
                    consequatur eligendi iure provident. Consequuntur nobis quaerat
                    error est quos obcaecati exercitationem. Necessitatibus sunt
                    praesentium reiciendis tempora maiores? Asperiores similique,
                    natus sed quasi ut repudiandae aliquid deserunt tempore eligendi
                    repellat hic iusto eveniet neque quisquam, nulla porro, eum
                    magni repellendus minima eaque! Perspiciatis omnis odio
                    architecto recusandae quaerat harum vel ducimus ullam. Officiis
                    dolores sapiente nihil architecto veritatis quos provident
                    necessitatibus! Nostrum fugiat nisi placeat aspernatur deleniti
                    explicabo ab omnis odio. Ratione. Temporibus sunt nihil expedita
                    corrupti reiciendis, asperiores nostrum amet quam, totam ut
                    maiores magni saepe dolore at consectetur. Autem illum quos cum
                    perferendis quia voluptatibus tempore beatae quidem accusantium
                    temporibus. Magnam fugiat vero maiores, repellendus, ex quaerat
                    esse sunt eum itaque nihil pariatur laborum expedita veniam
                    dolorum reprehenderit nostrum accusantium autem! Consequatur
                    animi, quam numquam pariatur et quia odit ad. Porro provident
                    excepturi veniam exercitationem cumque deleniti aperiam!
                    Laudantium fugit magni, accusantium velit ipsa nostrum minima
                    temporibus distinctio cum minus quis voluptas expedita ad porro
                    quam earum fugiat, suscipit eius! Culpa vitae dolores labore
                    fugit necessitatibus similique ex ipsa? Dolorem earum quia
                    debitis quod suscipit aut nesciunt, necessitatibus error laborum
                    quasi nisi a cumque asperiores voluptate, expedita, officiis
                    perspiciatis ex! Ipsam optio quo deserunt magni cupiditate
                    exercitationem voluptas? Animi in asperiores quos minima a,
                    deleniti, facere vel ratione aut recusandae est voluptate minus.
                    Reiciendis eius doloremque magni, sit harum voluptatem?
                    Consectetur ad cum, rerum itaque veniam laudantium eligendi ut
                    tenetur mollitia nihil praesentium voluptatem, aspernatur,
                    dolorem modi?
                  </p>
                </div>
    
                <!-- Modal footer -->
                <div
                  class="mt-auto flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10 min-[0px]:rounded-none">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss>
                    Close
                  </button>
                </div>
              </div>
            </div>
          </div>
    
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Non-invasive Modal

    This type of modal does not block any interaction on the page. Simply set data-twe-modal-non-invasive to true.

    Modal title
    Modal body text goes here.
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-toggle="modal"
            data-twe-target="#exampleModalNonInvasive"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Launch demo modal
          </button>
    
          <!-- Modal -->
          <div
            data-twe-modal-init
            data-twe-modal-non-invasive="true"
            class="pointer-events-none fixed left-0 top-0 z-[1055] hidden w-full overflow-y-auto overflow-x-hidden outline-none"
            id="exampleModalNonInvasive"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div
              data-twe-modal-dialog-ref
              class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:my-7 min-[576px]:max-w-[500px]">
              <div
                class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
                  <h5
                    class="text-xl font-medium leading-normal text-surface dark:text-white"
                    id="exampleModalLabel">
                    Modal title
                  </h5>
                  <button
                    type="button"
                    class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                    data-twe-modal-dismiss
                    aria-label="Close">
                    <span class="[&>svg]:h-6 [&>svg]:w-6">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </span>
                  </button>
                </div>
                <div class="relative flex-auto p-4" data-twe-modal-body-ref>
                  Modal body text goes here.
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                    data-twe-modal-dismiss
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                    data-twe-ripple-init
                    data-twe-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Modal,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Modal, Ripple });
          
            
        

    Related resources

    Tutorials:

    icons focus active and others dark mode arbitrary values flexbox spacing buttons rounded corners shadows cards sizing forms

    Extended Docs:

    animations colors headings shadows typography buttons cards paragraphs popover video form templates login form registration form charts tables borders center grid items dark theme display flex position spacing text bold text size visibility hidden z index

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction content should be the star less is more power of visual hierarchy art of prioritization de emphasize with no mercy size matters lowering contrast beyond borders let it breathe user experience do not start with the roof project personality design system plan the process principles tips and tricks
    • Basic example
    • Modal components
    • Positions
    • Frame
    • Static backdrop
    • Scrolling long content
    • Modal dialog scrollable
    • Vertically centered
    • Tooltips and popovers
    • Varying modal content
    • Toggle between modals
    • Button with icon
    • Sizes
    • Fullscreen modal
    • Non-invasive Modal
    • Related resources

    Modal - API


    Import

    Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { Modal, initTWE } from "tw-elements";
            initTWE({ Modal });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Simple notification

    The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a custom backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

    Via data attributes

    Toggle

    Set data-twe-toggle="modal" on a controller element, like a button, along with a data-twe-target="#foo" or href="#foo" to target a specific modal to toggle. For ES format, you must first import and call the initTWE method.

    • HTML
            
                
            <button
              type="button"
              data-twe-toggle="modal"
              data-twe-target="#exampleModal">
              Launch demo modal
            </button>
            
            
        
    Dismiss

    Dismissal can be achieved with data attributes on a button within the modal as demonstrated below:

    • HTML
            
                
                  <button type="button" data-twe-dismiss="modal" aria-label="Close">
                    Close
                  </button>
                
            
        

    or on a button outside the modal using the data-twe-target as demonstrated below:

    • HTML
            
                
                <button
                  type="button"
                  class="btn-close"
                  data-twe-dismiss="modal"
                  data-twe-target="#my-modal"
                  aria-label="Close"
                >
                  X
                </button>;                  
                
            
        

    While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the WAI-ARIA modal dialog design pattern. Do this at your own risk.

    Via JavaScript

    You can access an instance from your Javascript code, by using the getInstance static method of the Modal class - it allows making use of all the public methods listed in the Methods section.

    • javascript
    • umd
            
                
                const myModal = new Modal(document.getElementById("myModal"), options);
                
            
        
            
                
                const myModal = new twe.Modal(document.getElementById("myModal"), options);
                
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-backdrop="false".

    Name Type Default Description
    backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
    keyboard boolean true Closes the modal when escape key is pressed.
    focus boolean true Puts the focus on the modal when initialized.
    modalNonInvasive boolean false Sets the modal to be non-invasive. The modal won't block scrolling and won't have a backdrop.

    Classes

    Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-class-static="scale-2" (in default there is a 1.02).

    Name Default Description
    backdrop opacity-50 transition-all duration-300 ease-in-out fixed top-0 left-0 z-[1040] bg-black w-screen h-screen Sets styles for the backdrop.
    static scale-[1.02] Size of zoom when clicking outside the modal in static type.
    staticProperties transition-scale duration-300 ease-in-out Style in which static modal zoom in and zoom out when clicking outside modal.

    Methods

    Asynchronous methods and transitions:
    All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

    Passing options

    Activates your content as a modal. Accepts an optional options object.

    Method Description Example
    dispose Destroys an element’s modal. myModal.dispose()
    handleUpdate Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). myModal.handleUpdate()
    hide Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.twe.modal event occurs). myModal.hide()
    show Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.twe.modal event occurs). myModal.show()
    toggle Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.twe.modal or hidden.twe.modal event occurs). myModal.toggle()
    getInstance Static method which allows you to get the modal instance associated with a DOM element. Modal.getInstance()
    getOrCreateInstance Static method which allows you to get the modal instance associated with a DOM element or create a new one in case it wasn't initialized. Modal.getOrCreateInstance()
    • javascript
    • umd
            
                
                  const myModalEl = document.getElementById("myModal");
                  const modal = new Modal(myModalEl);
                  modal.show();              
                  
            
        
            
                
                  const myModalEl = document.getElementById("myModal");
                  const modal = new twe.Modal(myModalEl);
                  modal.show();              
                  
            
        

    Events

    Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

    Event type Description
    show.twe.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
    shown.twe.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
    hide.twe.modal This event is fired immediately when the hide instance method has been called.
    hidden.twe.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
    hidePrevented.twe.modal This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-twe-keyboard set to false.
    • JavaScript
            
                
                    const myModalEl = document.getElementById("myModal");
                    myModalEl.addEventListener("hidden.twe.modal", (e) => {
                      // do something...
                    });
                    
            
        
    • Import
    • Usage
    • Options
    • Classes
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO