contoh tailwind & jquery menampilkan modal

tailwind modal html jquery

<style>
  .modal-wrapper{
    @apply z-10 inset-0 overflow-y-auto opacity-0;
  }

  .modal-wrapper:not(.open){
    @apply w-0 h-0 absolute;
  }

  .modal-wrapper.open{
    @apply fixed opacity-100;
  }

  .modal-wrapper .modal-content{
    @apply items-end justify-center text-center sm:block sm:p-0 flex min-h-screen pt-4 px-4 pb-20;
  }

  .modal-wrapper .modal-backdrop{
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
  }

  .modal-wrapper .modal-content .modal-trick{
    @apply hidden sm:inline-block sm:align-middle sm:h-screen;
  }

  .modal-wrapper .modal-content .modal-body{
    @apply relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full ease-in-out duration-200;
  }
</style>

  <div id="modal-cekout" class="modal-wrapper" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="modal-content">
      <div class="modal-body">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="w-full">
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Proses Cekout ?</h3>
              <div class="mt-2">
                <textarea name="alamat" rows="6" required class="rounded-md border-[1px] p-2 w-full" placeholder="Alamat"></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-orange-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Cekout</button>
          <button type="button" onclick="closeModal('#modal-cekout')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Batal</button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    initModal('#modal-cekout')
  
    function initModal(selector){
      $(selector).find('.modal-content').prepend(`<div class="modal-backdrop" aria-hidden="true"></div><span class="modal-trick" aria-hidden="true">&#8203;</span>`)
      $(selector).find('.modal-backdrop').on('click',function(){
        closeModal(selector)
      });
      closeModal(selector)
    }

    function closeModal(selector,cb=()=>{}){
      $(`${selector} .modal-backdrop`).removeClass('opacity-100')
      $(`${selector} .modal-backdrop`).addClass('opacity-0')

      $(`${selector} .modal-body`).removeClass('opacity-100 translate-y-0 sm:scale-100')
      $(`${selector} .modal-body`).addClass('opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')

      setTimeout(() => {
        $(`${selector}`).removeClass('open')
        $(`${selector} .modal-content`).addClass('w-0 h-0 absolute')
        $(`${selector} .modal-backdrop`).addClass('w-0 h-0 absolute')

        cb()
      }, 200);
    }

    function openModal(selector,cb=()=>{}){
      $(`${selector}`).addClass('open')

      $(`${selector} .modal-content`).removeClass('w-0 h-0 absolute')
      $(`${selector} .modal-backdrop`).removeClass('w-0 h-0 absolute')

      $(`${selector} .modal-backdrop`).removeClass('opacity-0')
      $(`${selector} .modal-backdrop`).addClass('opacity-100')

      $(`${selector} .modal-body`).removeClass('opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')
      $(`${selector} .modal-body`).addClass('opacity-100 translate-y-0 sm:scale-100')
      cb()
    }
  </script>