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