bootstrap-layer弹出框的使用

它也是基于bootstrap的js,css,然后再引入layer.js

https://www.cnblogs.com/phpnan/p/6541335.html

下载地址https://download.csdn.net/download/kxj19980524/10832565

<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/witkey.css"></link>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.css"></link>
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<![endif]-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="${pageContext.request.contextPath}/static/common/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/locale/bootstrap-table-zh-CN.js"></script>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/assets/layer/layer.js" type="text/javascript"></script>

layer.alert('墨绿风格，点击确认看深蓝', {
      skin: 'layui-layer-molv' //样式类名  自定义样式
      ,closeBtn: 1    // 是否显示关闭按钮
      ,anim: 1 //动画类型
     ,btn: ['重要','奇葩'] //按钮
      ,icon: 6    // icon
      ,yes:function(){                //点击确定的回调函数
          layer.msg('按钮1')
      }
     ,btn2:function(){               //取消的回调函数
      layer.msg('按钮2')
}});

效果图 

layer.open({
                                    content: "<div>点击确认按钮回调事件</div>",
                                    yes:function(index,layero){
                                        alert("点击确认按钮触发事件")
                                        layer.close(index); //关闭弹出框
                                    }
                                })

 

确认取消框

layer.confirm('你确定要删除吗?', {icon: 3, title:'提示'}, function(index){
    //点击确认执行的代码
})

 

如果使用的ifream嵌套的话,页面太长弹出框就会跑下面去,这时候使用parent.layer就可以了,如果嵌套了好多层的话,直接使用top.layer就可以了

parent.layer.open({
                                    content: "<div>添加成功</div>",
                                    yes:function(index,layero){
                                        var str = "";
                                        location.href="${pageContext.request.contextPath}/jsps/commodity/brand.jsp";
                                        parent.layer.close(index); //关闭弹出框
                                    }
                                })