Custombox+bootstrap演示20种不同的手机响应式弹出层modal特效

Custombox是一款自定义modal模态框弹出层样式的插件。演示首页显示了不同的effects，最简单的调用方法请看http://www.sucaiq.com/jquery/demo/6/671/test.html,还支持escape键关闭modal弹出层。

淘建站为您提供更多_悬浮层/弹出层_弹窗_bootstrap_弹出层，在此特别感谢您对我们的支持与厚爱！

引入custombox和bootstrap相关插件

<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/demo.css"/>
<link rel="stylesheet" href="css/custombox.min.css"/>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script> 
<script src="js/custombox.min.js"></script>

<a id="element" href="#modal">点击显示弹出层</a>

<div id="modal" class="modal-demo">
    <button type="button" class="close" onclick="Custombox.close();">
        <span>×</span><span class="sr-only">Close</span>
    </button>
    <h4 class="title">Modal 标题</h4>
    <div class="text">
        网站是致力于网页前端开发用户的一个下载资源交流平台网站。在这里您可以找到时下最流行、最新进的网页前端脚本代码和网页设计图片素材。且融入了目前最流行微博客社交功能，您可以在这找到与您一起的同行工作者。您可以在这里发布您自己的代码和图片等素材，与别人分享。同时您也可以申请需要的素材。
    </div>
</div>

$('#element').on('click', function(e) {
    Custombox.open({
        target: '#modal',
        effect: 'fadein'
    });
    e.preventDefault();
});

Custombox相关API教程