Tailwind CSS Modal Components

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

  <!-- 带表单的模态框 -->
  <dialog id="modal_form" class="modal rounded-lg shadow-xl">
    <div class="modal-box w-11/12 max-w-md bg-white p-0 rounded-lg">
      <!-- 标题区 -->
      <div class="p-4 border-b border-gray-200">
        <h3 class="text-lg font-bold text-gray-900">Contact Form</h3>
      </div>
      
      <!-- 带表单的内容区 -->
      <div class="p-4">
        <p class="text-gray-600 mb-4">
          Please fill out this form to contact us. We'll respond as soon as possible.
        </p>
        
        <form id="contactForm" class="space-y-4">
          <!-- 姓名字段 -->
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
            <input 
              type="text" 
              id="name" 
              name="name" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" 
              placeholder="John Doe"
              required
            >
          </div>
          
          <!-- 邮箱字段 -->
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
            <input 
              type="email" 
              id="email" 
              name="email" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" 
              placeholder="[email protected]"
              required
            >
          </div>
          
          <!-- 信息字段 -->
          <div>
            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
            <textarea 
              id="message" 
              name="message" 
              rows="4" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" 
              placeholder="Your message here..."
              required
            ></textarea>
          </div>
        </form>
      </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>
        <button 
          type="submit" 
          form="contactForm"
          onclick="submitForm()"
          class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg shadow hover:bg-blue-700 transition-colors"
        >
          Submit
        </button>
      </div>
    </div>
  </dialog>

  <style>
    .modal {
      max-height: 90vh;
    }
    .modal-box {
      overflow-y: auto;
    }
    .modal-backdrop {
      background-color: rgba(0, 0, 0, 0.3);
    }
  </style>
  
  <script>
    function submitForm() {
      const form = document.getElementById('contactForm');
      if (form.checkValidity()) {
        // Here would go the code to submit the form data
        alert('Form submitted successfully!');
        document.getElementById('modal_form').close();
      } else {
        // Trigger browser's native form validation
        form.reportValidity();
      }
    }
  </script>

                        

                            <!-- 触发按钮 -->
  <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>

                        

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

  <!-- 响应式模态框 -->
  <dialog id="modal_responsive" class="modal modal-bottom sm:modal-middle rounded-lg shadow-xl">
    <div class="modal-box w-11/12 max-w-md bg-white p-0 rounded-lg">
      <!-- 标题区 -->
      <div class="p-4 border-b border-gray-200">
        <h3 class="text-lg font-bold text-gray-900">Responsive Modal</h3>
      </div>
      
      <!-- 内容区 -->
      <div class="p-4">
        <p class="py-4 text-gray-600">
          This modal is responsive. On mobile devices (small screens), it appears at the bottom of the screen.
          On larger screens, it appears in the middle of the screen.
        </p>
        <p class="py-2 text-gray-600">
          Resize your browser window to see how it responds to different screen sizes.
        </p>
      </div>
      
      <!-- 底部按钮区 -->
      <div class="p-4 border-t border-gray-200 flex justify-end">
        <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">
            Close
          </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);
    }
    .modal-bottom {
      align-items: flex-end;
    }
    .modal-middle {
      align-items: center;
    }
    
    /* Modal animation for bottom slide */
    @keyframes modal-pop {
      0% {
        opacity: 0;
        transform: translateY(20%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .modal-bottom .modal-box {
      animation: modal-pop 0.3s ease-out;
    }
  </style>

                        

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

  <!-- 全宽模态框 -->
  <dialog id="modal_fullwidth" class="modal rounded-lg shadow-xl">
    <div class="modal-box w-11/12 max-w-5xl bg-white p-0 rounded-lg">
      <!-- 标题区 -->
      <div class="p-4 border-b border-gray-200">
        <h3 class="text-lg font-bold text-gray-900">Full-width Modal</h3>
      </div>
      
      <!-- 内容区 -->
      <div class="p-4">
        <p class="py-4 text-gray-600">
          This is a full-width modal with a custom width setting. It's perfect for displaying large amounts of content, 
          tables, or complex layouts that need more horizontal space.
        </p>
        
        <!-- 示例表格 -->
        <div class="overflow-x-auto mt-4">
          <table class="min-w-full border-collapse border border-gray-300">
            <thead>
              <tr class="bg-gray-100">
                <th class="border border-gray-300 px-4 py-2 text-left">ID</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Name</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Email</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Department</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Position</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="border border-gray-300 px-4 py-2">001</td>
                <td class="border border-gray-300 px-4 py-2">John Doe</td>
                <td class="border border-gray-300 px-4 py-2">[email protected]</td>
                <td class="border border-gray-300 px-4 py-2">Marketing</td>
                <td class="border border-gray-300 px-4 py-2">Manager</td>
                <td class="border border-gray-300 px-4 py-2">Active</td>
              </tr>
              <tr class="bg-gray-50">
                <td class="border border-gray-300 px-4 py-2">002</td>
                <td class="border border-gray-300 px-4 py-2">Jane Smith</td>
                <td class="border border-gray-300 px-4 py-2">[email protected]</td>
                <td class="border border-gray-300 px-4 py-2">Sales</td>
                <td class="border border-gray-300 px-4 py-2">Representative</td>
                <td class="border border-gray-300 px-4 py-2">Active</td>
              </tr>
              <tr>
                <td class="border border-gray-300 px-4 py-2">003</td>
                <td class="border border-gray-300 px-4 py-2">Robert Johnson</td>
                <td class="border border-gray-300 px-4 py-2">[email protected]</td>
                <td class="border border-gray-300 px-4 py-2">IT</td>
                <td class="border border-gray-300 px-4 py-2">Developer</td>
                <td class="border border-gray-300 px-4 py-2">Active</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 底部按钮区 -->
      <div class="p-4 border-t border-gray-200 flex justify-end">
        <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">
            Close
          </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);
    }
  </style>

                        

                            
  <!-- 触发按钮 -->
  <button onclick="modal_basic.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_basic" class="modal rounded-lg shadow-xl">
    <div class="modal-box w-11/12 max-w-md bg-white p-0 rounded-lg">
      <!-- 标题区 -->
      <div class="p-4 border-b border-gray-200">
        <h3 class="text-lg font-bold text-gray-900">Modal Title</h3>
      </div>
      
      <!-- 内容区 -->
      <div class="p-4">
        <p class="py-4 text-gray-600">
          This is a basic modal dialog component. It can be used to display important information or request user input.
        </p>
      </div>
      
      <!-- 底部按钮区 -->
      <div class="p-4 border-t border-gray-200 flex justify-end">
        <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">
            Close
          </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);
    }
  </style>