组件 资本 材料设计模态框

材料设计模态框

一个采用材料设计风格的模态组件,具有响应式设计和黑暗主题支持。包含模态覆盖、带有卡片外观的模态容器和关闭按钮。未包含JavaScript。

预览

HTML 代码

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Modal content goes here. This is a placeholder for your information.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Got It!</button>
      </div>
    </div>
  </div>
</div>

相关组件

复古模态组件

一个响应式复古/复古风格的模态组件,使用Tailwind CSS设计,支持暗模式,融入怀旧的80年代/90年代美学。

打开

拟物化模态组件

一个复杂的响应式模态组件,采用拟物化设计风格,具有用于电子商务的互补色。

打开

黑暗模式模态组件

一个简单且响应式的暗黑模式模态组件,设计用于阅读和内容消费。它具有互补色彩方案和极简布局,适合博客或内容驱动的网站。

打开