效果體驗:
http://hovertree.com/texiao/html5/17/
效果圖：
代碼如下：
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>jQuery比bootstrap效果還帥的響應式模態窗口插件 - 何問起</title><base target="_blank" /> 8 9 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/reset.css"> <!-- CSS reset --> 10 11 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/style.css"> <!-- Resource style --> 12 <!--[if IE]> 13 <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script> 14 <![endif]--> 15 16 </head> 17 <body> 18 19 <div class="sucaihuo-container"> 20 <section class="cd-section"> 21 <a class="cd-bouncy-nav-trigger" href="javascript:;" target="_self">顯示菜單</a> 22 </section> 23 <div><a href="http://hovertree.com/h/bjaf/menulayer.htm">原文</a> <a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上彈出菜單</a> 24 </div> 25 <div class="cd-bouncy-nav-modal"> 26 <nav> 27 <ul class="cd-bouncy-nav"> 28 <li><a href="http://hovertree.com/">首頁</a></li> 29 <li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li> 30 <li><a href="http://hovertree.com/menu/php/">PHP</a></li> 31 <li><a href="http://hovertree.com/h/bjaf/hovertreebatch.htm">批量</a></li> 32 <li><a href="http://hovertree.com/texiao/easysector/">餅圖</a></li> 33 <li><a href="http://tool.hovertree.com/">工具</a></li> 34 </ul> 35 </nav> 36 <a href="#0" class="cd-close" target="_self">關閉菜單</a> 37 </div> 38 </div> 39 <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script> 40 <script src="http://hovertree.com/texiao/html5/17/main.js"></script> <!-- Resource jQuery --> 41 </body> 42 </html>