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官方参数说明