H5_0027：Layer使用，自带关闭按钮，自定义弹窗位置，保持最顶层

 

 

自带关闭按钮，自定义弹窗位置，保持最顶层

      //多窗口模式，层叠置顶
      layer.open({
        type: 2, //此处以iframe举例
        title: '当你选择该窗体时，即会在最顶端',
        // ,area: ['390px', '260px']
        title: false,
        closeBtn: false,
        shade: 0,
        maxmin: false,
        area: ['100%', '100%'],
        // offset: 'r',
        //layer弹窗位置，随机坐标
        offset: [ 
          Math.random()*($(window).height()-300)
          ,Math.random()*($(window).width()-390)
        ], 
        content: 'https://www.baidu.com/',
        btn: ['关闭'], //添加关闭按钮
        btn2: function(){
          layer.closeAll();
        },
        zIndex: layer.zIndex, //重点1
        success: function(layero){
            //始终保持在最顶层
          layer.setTop(layero); //重点2
        }
      });

 

 

 

 

 

1，提示

 

    document.getElementById("cloWd").onclick = function(){

      layer.confirm('您确定要关闭吗?',{btn: ['确定', '取消'],title:"温馨提示"}, function(){

        window.location.href = "http://127.0.0.1:12345/"

    });

      // layer.open({

      //   title: '在线调试'

      //   ,content: '可以填写任意的layer代码'

      // });

      // layer.alert('墨绿风格，点击确认看深蓝', {

      //   skin: 'layui-layer-molv' //样式类名

      //   ,closeBtn: 0

      //   }, function(){

      //   layer.alert('偶吧深蓝style', {

      //   skin: 'layui-layer-lan'

      //   ,closeBtn: 0

      //   ,shift: 4 //动画类型

      //   });

      //   });

      //   layer.msg('您的航班价格已变动，请返回重新选择航班！', {

      //     time: 10000,

      //     shade : [0.6 , '#000' , true],

      //     btn: ["返回列表", "关闭"],

      //     yes: function () { history.back(); }

      // });

        // if (window.confirm("您确定要关闭吗？")) { 

        //   // window.location.href = "http://127.0.0.1:12345/"

        // }

 

2，用layer 模拟密码框

        layer.prompt({

            formType: 1,  //输入框类型，支持0（文本）默认1（密码）2（多行文本）

            // value: 'ttt', //初始时的值，默认空字符

            maxlength: 10,  //可输入文本的最大长度，默认500

            title: '请输入访问密码',

            // area: ['800px', '350px'], //自定义文本域宽高

            offset:['42%','60%'],  //定义弹出窗的位置

            closeBtn: 0,  //是否显示关闭按钮

            shade: false,

            shade: [0], //背景遮罩透明度

            shadeClose: false, //点击遮罩关闭层

            btn: ['确定'], //自动义多个按钮

            // fixed: true, // 不随滚动条滚动

            move: false, // 静止拖拽

            // yes: function(index, layero){

            //     //按钮【按钮一】的回调，只是回调无法获取输入值

            // },

            // btn2: function(index, layero){

            //     //按钮【按钮二】的回调

            //     //return false 开启该代码可禁止点击该按钮关闭

            // },

            style: 'position:fixed;'

            },

            // 点击确定后的响应方法

            function(value, index, elem){

                if('603833' == value){

                    layer.close(index);

                    document.getElementById('topImg').style.display = "none";

                }else{

                    layer.msg('密码输入错误！', {

                        icon: 2,

                        time: 1000 //1秒关闭（如果不配置，默认是3秒）

                    }, function(){

                        //提示关闭后做什么

                    }); 

                }

            }

        );

 

3，去掉弹窗的内容的滚动条

                    layer.open({
                        type: 2,
                        title: false,
                        // 禁止移动
                        move: false,
                        // 禁止缩放
                        resize:false,
                        closeBtn: 0,
                        shade: true,
                        shade: [0.5],
                        shadeClose: true,
                        area: [vidwid, vidhig],
                        // btn: ['关闭'],
                        // btnAlign:'c',
                        style: 'position:fixed;',
                        // content: "pages/demo.html"
                        // no去掉滚动条
                        content: ["pages/demo.html" , 'no']
                        // time: 15000
                    });