当前位置: 首页 > 工具软件 > layer mobile > 使用案例 >

layer mobile开发layer.full

邹坚壁
2023-12-01

Layer For Mobile 之 layer.full()

背景介绍:layer mobile是专门针对手机页面开发的一套框架,具体介绍请看官方文档 http://layer.layui.com/mobile/api.html ,因其扩展方法有限,我用到了layer Pc版的layer.full这里做了扩展。

问题:目前layer mobile是2.0版,没有layer.full方法。因为用到做了扩展。

包括两部分,一部分是js,一部分是样式。

js部分

function LayerFull(title, url) {
   
    layer.open({
        type: 1,
        btn: ["点击关闭本页面"],
        yes: function (index) {
            layer.close(index);
        },
        title: title,
        content: "<iframe src=" + url + "  width='100%' height='96%'></iframe>",
        style: 'position:fixed; left:0; top:0; width:100%; height:96%;    border: none;'
    });
 
};

css部分

.layui-m-layercont {
    height: 80%;
}
    .layui-m-layercont iframe {
        border: none;
        z-index: 900;
    }
.layui-m-layermain .layui-m-layerchild h3 {
    height: 30px;
    line-height: 30px;
}

/**
iOS兼容iFrame滚动条样式
 */
.layui-m-layercont {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /*height: 330px;*/
}

    .layui-m-layercont iframe {
        width: 100%;
        /*height: 80%;*/
    }

 

转载于:https://www.cnblogs.com/Blogs-Wang/p/10799123.html

 类似资料: