layer弹出层

layer弹出层

layer弹出层是基于jQuery的js插件。应用步骤如下:

1.引入jQuery核心包和layer.js文件

这里写图片描述

2.调用layer的插件函数

这里写图片描述

3.layer的主要配置项

(1)title:标题

(2)maxmin:最大化最小化控件

(3)area:弹出层宽高

(4)type:弹出层类型(值为0-4)

​ type=0时,content中填写显示的内容

​ type=1时,content中为对象,弹出当前页面的一个块

​ type=2时,content中为文件地址,弹出另一个文件

(5)content:弹出层内容

(6)主要函数:

​ layer.alert(‘弹出框’);

​ layer.confirm(‘提示选择框’);

4.实例

测试页面test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer弹出层测试</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="layer.js"></script>
</head>
<body>
<div id="d">div标签中的内容</div>

    <script type="text/javascript">
        // (1)type=0,content中填写显示的内容

        // layer.ready(function(){
        //  layer.open({
        //      type:0,
        //      title:'弹出层测试1',
        //      maxmin:true,
        //      area:['800px','500px'],
        //      content:'第一个弹出层测试'
        //  })
        // })

        // (2)type=1, content=对象,弹出当前页面中的一个块

        // layer.ready(function(){
        //  layer.open({
        //      type:1,
        //      title:'弹出层测试2',
        //      maxmin:true,
        //      area:['800px','500px'],
        //      content:$('#d')
        //  })
        // })

        // (3)type=2,content=文件地址,将另一个文件弹出

        layer.ready(function(){
            layer.open({
                type:2,
                title:'弹出层测试3',
                maxmin:true,
                area:['800px','500px'],
                content:'a.html'
            })
        })

    </script>
</body>
</html>

弹出文件a.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
    <p>弹出层测试文件</p>
</body>
<script type="text/javascript">

    //绑定点击事件,关闭弹出层
    $(document).click(function(){
        //获取弹出层id
        var index = parent.layer.getFrameIndex(window.name);
        //调用layer.close方法,关闭弹出层
        parent.layer.close(index);
    })
</script>
</html>

代码及相关文件详见GitHub主页 弹出层插件layer

https://github.com/Jianxq12/ITcast/tree/master/Ajax

原文地址:https://www.cnblogs.com/Jianxq12/p/7684307.html