卡卡网

弹出窗口在网页设计中十分常用，本文介绍4款模态弹窗(modal popup)，这几款弹窗都是响应式的。

1、CSS+JS实现的模态弹窗

此弹窗是CSS+JS实现，无需用到JQuery。

demodownload

2、纯CSS实现的响应式模态弹窗

此款弹窗是纯CSS实现的响应式模态窗口，代码少且简单，但功能却齐全。简洁的外观提升了用户体验。

这个响应式模态对话窗口非常适合显示数据。只需单击一下即可将其打开。

demodownload

3、CSS+jQuery实现的响应式模态弹窗

此款弹窗是CSS+jQuery实现的响应式模态弹窗，它包含一些漂亮的CSS3动画。

demodownload

4、纯CSS实现的响应式模态弹窗

此款弹窗是纯CSS实现的响应式模态弹窗，在单击捕获时窗口向下滑动渐现。模态框有常规版和选项卡版。

demodownload

总结

本文介绍的4款响应式模态弹窗(modal popup)，有纯CSS实现，有CSS+JS实现，也有CSS+JQuery实现，在满足要求的前提下，建议优先考虑纯CSS实现的方法，那样代码迁移、维护更方便。

您可能对以下文章也感兴趣

• 响应式弹出DIV层常见效果/模式窗口设计
• Bootstrap 3 & AngularJS 模态对话窗口设计实例
• 纯CSS3实现模态弹出窗口

标签: 弹窗  弹出窗口  模态窗口  模式窗口  模式窗体