推荐几款好用的模态框附带教程

一、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>

总结

以上是生活随笔为你收集整理的推荐几款好用的模态框附带教程的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。