Modal With Close Btn

                    <!-- 触发按钮 -->
  <button onclick="modal_close.showModal()" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg shadow hover:bg-blue-700 transition-colors">
    Open Modal
  </button>

  <!-- 模态框 -->
  <dialog id="modal_close" class="modal rounded-lg shadow-xl">
    <div class="modal-box w-11/12 max-w-md bg-white p-0 rounded-lg relative">
      <!-- 角落关闭按钮 -->
      <form method="dialog" class="absolute right-2 top-2">
        <button class="h-8 w-8 rounded-full flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100">
          ✕
        </button>
      </form>
      
      <!-- 标题区 -->
      <div class="p-4 border-b border-gray-200">
        <h3 class="text-lg font-bold text-gray-900">Modal with Close Button</h3>
      </div>
      
      <!-- 内容区 -->
      <div class="p-4">
        <p class="py-4 text-gray-600">
          This modal features a close button in the top-right corner. This is often preferred for a cleaner user interface.
        </p>
        <p class="py-2 text-gray-600">
          Press ESC key or click on ✕ button to close the modal.
        </p>
      </div>
      
      <!-- 底部按钮区 -->
      <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
        <form method="dialog">
          <button class="px-4 py-2 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition-colors">
            Cancel
          </button>
        </form>
        <form method="dialog">
          <button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg shadow hover:bg-blue-700 transition-colors">
            Confirm
          </button>
        </form>
      </div>
    </div>
  </dialog>

  <style>
    .modal {
      max-height: 90vh;
    }
    .modal-box {
      overflow-y: auto;
    }
    .modal-backdrop {
      background-color: rgba(0, 0, 0, 0.3);
    }
    .btn-circle {
      border-radius: 9999px;
    }
    .btn-ghost {
      background-color: transparent;
      border-color: transparent;
    }
  </style>