Layer弹框/弹层的简单使用

1、引入layer.js

<script type="text/javascript" src="${basePath }public/layer-v2.3/layer/layer.js"></script>

2、javascript代码

注：图片来自网络截图

<script type="text/javascript">
    /** 弹层 */
    layer.open({
        type: 2, // 1-在content中写html代码， 2-在content中写src路径
        area: ['70%', '90%'],
title: "这是弹出层",
content: '/wssb/doClForm.jspx?path=' +path,
btn:['确定', '取消'],
yes: function(index, layero){
    var formWin = $(layero).find("iframe")[0].contentWindow; // 可用来调用弹出层的函数
    formWin.doSubmit()
        },
        btn2: function(index){
            layer.close(index);
        }
    });
    layer.close(index); // 关闭弹框
    // 在iframe中
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
// 关闭iframe
    window.parent.checkFile(jsonObj);
// 调用顶层的checkFile方法
    params.sxid = parent.newsxid; // 调用顶层的newsxid全局变量
    /** 遮罩
*/
    var indexlayer; // 表单保存遮罩
    function openlayer(){ //遮罩
        indexlayer = layer.msg('正在保存...', {
            time: 0, //不自动关闭
icon: 16,
shade: 0.2
        });
    }
    layer.close(indexlayer);//关闭遮罩
    /** 警告框/消息框 */
    layer.alert('保存失败！', {icon: 5});
// 失败，红脸
    layer.msg('保存成功！', {icon: 6});
// 成功，绿脸
    // 1-"√"; 2-"×"; 3-"?" 4-"锁"
    /** tips */
    layer.tips("用户名不能为空！", "#userName", {
// 元素id
        tips: [1, '#f00c']
// 1-"上"; 2-"右"; 3-"下"; 4-"左"
    });
</script>

Layer演示

Layer官方参数说明

最后

以上就是安详水池为你收集整理的Layer弹框/弹层的简单使用的全部内容，希望文章能够帮你解决Layer弹框/弹层的简单使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。