Modals

Ready

Notes
Info
HTML
Assets
View
Context

Source: https://alpinetoolbox.com/examples/modal

Handle: @testing-alpine-v2-modals
Preview:
- With layout
- Component only
Filesystem Path: components/10-other-examples/testing-playground/alpine-js-v2-examples/modals/modals.hbs


        
        <section class="flex flex-wrap p-4 h-full items-center" x-data="{ 'showModal': false }" @keydown.escape="showModal = false">

    <button type="button" class="bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full" @click="showModal = true">Open modal
    </button>

    <!--Overlay-->
    <div class="overflow-auto" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }" x-cloak>
        <!--Dialog-->
        <div class="bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6" x-show="showModal">

            <!--Title-->
            <div class="flex justify-between items-center pb-3">
                <p class="text-2xl font-bold">Simple Modal!</p>
                <div class="cursor-pointer z-50" @click="showModal = false">
                    <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                    </svg>
                </div>
            </div>

            <!-- content -->
            <p>Modal content can go here</p>
            <p>...</p>
            <p>...</p>
            <p>...</p>
            <p>...</p>

            <!--Footer-->
            <div class="flex justify-end pt-2">
                <button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2" @click="alert('Additional Action');">Action
                </button>
                <button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400" @click="showModal = false">Close
                </button>
            </div>

        </div>
        <!--/Dialog -->
    </div><!-- /Overlay -->

</section>

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>

File:

Content:


                                [x-cloak] {
    display: none;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.scale-90 {
    transform: scale(.9);
}

.scale-100 {
    transform: scale(1);
}

URL: /components/raw/testing-alpine-v2-modals/modals.css
Filesystem Path: components/10-other-examples/testing-playground/alpine-js-v2-examples/modals/modals.css
Size: 314 Bytes


        <section class="flex flex-wrap p-4 h-full items-center" x-data="{ 'showModal': false }"
         @keydown.escape="showModal = false">

  <button type="button"
          class="bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full"
          @click="showModal = true">Open modal
  </button>

  <!--Overlay-->
  <div
          class="overflow-auto"
          style="background-color: rgba(0,0,0,0.5)"
          x-show="showModal"
          :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }"
          x-cloak
  >
    <!--Dialog-->
    <div
            class="bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6"
            x-show="showModal"
    >

      <!--Title-->
      <div class="flex justify-between items-center pb-3">
        <p class="text-2xl font-bold">Simple Modal!</p>
        <div class="cursor-pointer z-50" @click="showModal = false">
          <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
               viewBox="0 0 18 18">
            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
          </svg>
        </div>
      </div>

      <!-- content -->
      <p>Modal content can go here</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>

      <!--Footer-->
      <div class="flex justify-end pt-2">
        <button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2"
                @click="alert('Additional Action');">Action
        </button>
        <button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400"
                @click="showModal = false">Close
        </button>
      </div>

    </div><!--/Dialog -->
  </div><!-- /Overlay -->

</section>

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>


        
            
            {
  "text1": null
}