使用实时预览设计令人惊叹的CSS模态框和弹窗。自定义动画、样式、大小、背景效果和按钮 — 即时复制生成的CSS和HTML。
点击"打开模态框"查看对话框效果
模态框（也称为弹窗、灯箱或对话框）是确认操作、显示额外信息或收集用户输入而不离开当前页面的基本UI组件。精心设计的模态框通过保持上下文并覆盖聚焦内容来改善用户体验。此生成器创建具有流畅动画的纯CSS模态框，轻量、可访问且完全可定制。
模态框样式和动画是纯CSS的。对于打开/关闭功能，HTML输出中包含最少的JavaScript。您可以轻松地将其与您自己的JavaScript或框架集成。
可以！您可以在生成器中编辑标题和内容文本，HTML输出将反映您的自定义内容。您也可以用任何所需的HTML替换内容。
是的！所有模态框都使用响应式CSS构建。它们会自动调整以适应移动屏幕并尊重安全区域。
复制CSS和HTML代码，粘贴到您的项目中。模态框使用CSS自定义属性进行轻松主题化。调整变量以匹配您的设计系统。
可以！CSS输出包含动画持续时间的自定义属性。您可以调整--modal-duration变量，使动画更快或更慢。