一、layer彈出組件
下載地址:http://www.chtml.cn/topic/show/25
如何安裝：
1.下載完畢后把layer文件夾拿出放到你的工程目錄下thinkphp請放在指定的公共目錄下，以便前后臺使用。

2.layer的彈出框引用文件

<script src="/1.9.1/jquery.min.js"></script> <script src="layer/layer.js"></script>

3.layer框架的使用

如圖的html代碼：

<h2 style="padding-bottom:20px;">按鈕模塊：彈出框</h2><div id="button"><a href="javascript:;" id="tanchu">信息</a><a href="javascript:;" id="xunwen">詢問層</a><a href="javascript:;" id="tishi">提示層</a><a href="javascript:;" id="buhuo">捕獲頁</a><a href="javascript:;" id="ymc">頁面層</a><a href="javascript:;" id="zdyy">自定義頁</a><a href="javascript:;" id="jzc">加載層</a><a href="javascript:;" id="load">loading層</a></div>

layer的js控制代碼：

//關(guān)于 $('#about').on('click', function(){layer.alert(layer.v + ' - 賢心出品 sentsin.com'); });$("#tanchu").click(function(){//墨綠深藍(lán)風(fēng)layer.alert('墨綠風(fēng)格，點擊確認(rèn)看深藍(lán)', {skin: 'layui-layer-molv' //樣式類名,closeBtn: 0}, function(){layer.alert('偶吧深藍(lán)style', {skin: 'layui-layer-lan',closeBtn: 0,shift: 4 //動畫類型});}); })$("#xunwen").click(function(){//詢問框layer.confirm('您是如何看待前端開發(fā)？', {btn: ['重要','奇葩'] //按鈕}, function(){layer.msg('的確很重要', {icon: 1});}, function(){layer.msg('也可以這樣', {time: 20000, //20s后自動關(guān)閉btn: ['明白了', '知道了']});}); })$("#tishi").click(function(){//提示層layer.msg('玩命提示中'); })$("#buhuo").click(function(){//捕獲頁layer.open({type: 1,shade: false,title: false, //不顯示標(biāo)題content: $('.layer_notice'), //捕獲的元素cancel: function(index){layer.close(index);this.content.hide();layer.msg('捕獲就是從頁面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', {time: 5000, icon:6});}}); })$("#ymc").click(function(){//頁面層layer.open({type: 1,skin: 'layui-layer-rim', //加上邊框area: ['420px', '240px'], //寬高content: 'html內(nèi)容'}); })$("#zdyy").click(function(){//頁面層layer.open({type: 1,skin: 'layui-layer-rim', //加上邊框area: ['420px', '240px'], //寬高content: 'html內(nèi)容'}); })$("#jzc").click(function(){var index = layer.load(0, {shade: false}); //0代表加載的風(fēng)格，支持0-2 });$("#load").click(function(){//loading層var index = layer.load(1, {shade: [0.1,'#fff'] //0.1透明度的白色背景}); })

二、bootbox.js彈出框組件
下載地址：http://www.chtml.cn/topic/show/35

引入js文件代碼：

<script src="/1.11.1/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/bootbox.js"></script>

html頁面模態(tài)框控制代碼：

<a href="javascript:;" val="" class="del"></a>

js控制代碼

$(".del").click(function(){var url = $(this).attr('val');bootbox.confirm({title: "系統(tǒng)提示",message: "是否要該文章？", callback:function(result){if(result){}},buttons: {"cancel" : {"label" : "取消"},"confirm" : {"label" : "確定","className" : "btn-danger"}}});});

三、bootstrap模態(tài)框
下載地址：http://v3.bootcss.com/javascript/
版本：bootstrap 3
引入文件：

bootstrap.min.js

html代碼：
演示模態(tài)框

<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal </button><!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div> </div>

大小提示模態(tài)框

<!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button><div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"><div class="modal-dialog modal-lg"><div class="modal-content">...</div></div> </div><!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog modal-sm"><div class="modal-content">...</div></div> </div>

總結(jié)

以上是生活随笔為你收集整理的推荐几款好用的模态框附带教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。