一、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控制代碼：

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

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

js控制代碼

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

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

bootstrap.min.js

html代碼：
演示模態框

<!-- 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>

大小提示模態框

<!-- 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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。