layer弹出层使用总结

layer是layui的独立部分，弹层模块，单独引入layer.js即可

以下内容是 官网and下载layer.js 独立版的内容

官方文档说明

一、open的封装

/**
  * 打开一个layer的open弹窗
  *  这个封装适用于打开一个页面的弹窗，而非id
  * @param urlwithparam url带参数
  * 例子："/users/common_detail?userId=1"
*/
 hzObj.openWin = function (urlwithparam,title) {
    layer.open({
       type: 2,
       title:title,
       shade:0.4,
       offset:'30px',
       closeBtn:0,// 隐藏右上角的关闭按钮 
       area: ['90%', '90%'],
       shadeClose: true,// 表示点击阴影部分是否关闭
       content: urlwithparam,
	   cancel: function(){
			// 右上角关闭回调
			// 给需要的值重新赋值，或者做别的业务操作
			//return false 开启该代码可禁止点击该按钮关闭
		},
       success: function(layero,index){
            // 弹出后回调
            // layero: 当前层dom; index 当前层索引
        },
        end: function(){
            // 销毁后回调
            // 无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
        }
     });
 }

 二、layer通过open打开一个窗口，在这个窗口页面中返回到父页面

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
// 刷新父页面,不建议使用，用户体验不太好
window.parent.location.reload(); 

三、layer.prompt

prompt是在项目中填写拒绝原因的，不填写是不会让通过审核的。

layer.prompt({title: '请填写拒绝原因！', formType: 2}, function(text, index){
    // 点击取消
    layer.close(index);
    // text 是输入框中的内容
    // 点击确定执行的操作
    // 具体业务逻辑 TODO
});

四、layer.msg

layer.msg("修改成功");

这种提示会比alert的提示好一点，看应用看场景吧，alert需要点一下ok才能消失，msg持续几秒就消失掉了

五、询问框

//询问框 是否修改
var confirmIndex = layer.confirm('是否修改？', {
   btn: ['修改','返回'] //按钮，可以有多个按钮
}, function(){
   // 修改
   // ajax
 }, function(){
    // 返回
    /*layer.msg('也可以这样', {
      time: 20000, //20s后自动关闭
      btn: ['明白了', '知道了']
     });*/
 });

六、icon

layer.alert('酷毙了', {icon: 1});// 1-6
layer.msg('不开心。。', {icon: 5});// 1-6
layer.load(1); //风格1的加载,1-2两种风格

七、小小的注意点总结

当有一个confirm和open同时用的时候，确定的时候把confirm关掉体验更好一点。

function addToUrlGroupWin (val) {
    var confirmWinIndex = layer.confirm("确认XXXX怎么着吗？", {
        icon: 3,// 1-6选一个
        title: '提示',
        btn: ["添加", "取消"]
    }, function (index) {
        // 将confirm关掉，体验更好一点
        layer.close(confirmWinIndex);
        layer.open({
            title: "说点啥吧",
            type: 1,
            area: ["30%", "32%"],
            shift: 2,
            shadeClose: false,
            anim: 2,// 弹出动画，2表示从最底部往上滑入，值0-6
            content: $("#urlsGroup"),
            success: function(layero,index){
                // layero: 当前层dom; index 当前层索引
                // 弹出后回调
            }
        });
    });
},