CSS Modal—纯CSS实现模态窗口

本日先容一个用CSS实现模态窗口的插件——CSS Modal ，操作它可以很利便的实现模态窗口。它可以用来展示任意的HTML内容，而且支持响应式设计，具有精采的兼容性，通过它的js扩展，还能实现更强大的成果。

1、兼容性

Chrome
Firefox
Safari 6.x
Opera 12+
Internet Explorer 8 (部门成果)
Internet Explorer 9+
iOS 6
Android 2.3 (functional)
Android 4.x
Windows Phone 8

2、利用要领

到CSS Modal官网下载CSS Modal，引入CSS文件，假如需要更多高级成果需要引入js文件

<link rel="stylesheet" href="test/modal.css"> <script src="modal.js"></script>

利用CSS Modal HTML布局

<ul> <li><a href="#modal-show" title="CSS Modal">CSS Modal</a></li> </ul> <section class="modal--show" id="modal-show" tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true"> <div class="modal-inner"> <header> <h2 id="label-show">CSS Modal—纯CSS实现模态窗口</h2> </header> <div class="modal-content"> <p>本日先容一个用CSS实现模态窗口的插件——CSS Modal ，操作它可以很利便的实现模态窗口。它可以用来展示任意的HTML内容，而且支持响应式设计，具有精采的兼容性，通过它的js扩展，还能实现更强大的成果。</p> </div> <footer> <p>by ZJIAN</p> </footer> </div> <a href="#!" class="modal-close" title="Close this modal" data-dismiss="modal" data-close="Close">&times;</a> </section>

这是它最根基的利用要领，点击ul标签中的CSS Modal就会弹出section标签中的内容，假如你想利用更高级的成果，好比相册的展示、视频等等成果，CSS Modal也提供了办理方案，需要引入plugins中对应的js文件。