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

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

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

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

最新文章

热门文章