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文件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值