modal.html

<button class="btn btn-primary" data-modal-toggle="#modal_draggable">
Show Modal
</button>
<div class="modal" data-modal="true" id="modal_draggable">
<div class="modal-content max-w-[600px] top-[10%]">
  <div class="modal-header">
    <h3 class="modal-title">
      Modal Title
    </h3>
    <button class="btn btn-xs btn-icon btn-light" data-modal-dismiss="true">
      <i class="ki-outline ki-cross">
      </i>
    </button>
  </div>
  <div class="modal-body scrollable-y-auto">
    Modal components are commonly used for various purposes such as displaying login forms,
    confirming actions, presenting multimedia content, or showing detailed information.
    They provide a non-intrusive way to engage users and guide them through
    specific tasks or actions while maintaining the context of the underlying webpage.
  </div>
  <button class="btn btn-primary" data-modal-toggle="#modal_draggable2">
    Show Modal
  </button>
</div>
</div>
<div class="modal" data-modal="true" id="modal_draggable2">
<div class="modal-content max-w-[600px] top-[10%]">
  <div class="modal-header">
    <h3 class="modal-title">
      Modal Title 2
    </h3>
    <button class="btn btn-xs btn-icon btn-light" data-modal-dismiss="true">
      <i class="ki-outline ki-cross">
      </i>
    </button>
  </div>
  <div class="modal-body scrollable-y-auto">
    Modal components are commonly used for various purposes such as displaying login forms,
    confirming actions, presenting multimedia content, or showing detailed information.
    They provide a non-intrusive way to engage users and guide them through
    specific tasks or actions while maintaining the context of the underlying webpage.
  </div>
</div>
</div>