码迷,mamicode.com
首页 > 其他好文 > 详细

layui 各个弹出层的使用方法

时间:2021-01-19 11:55:21      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:平滑   精准   添加   位置   定义   cancel   nal   放大   max   

html代码复制可直接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.layui.com/admin/std/dist/layuiadmin/layui/css/layui.css">
    <script type="text/javascript" src="https://www.layui.com/admin/std/dist/layuiadmin/layui/layui.js"></script>
</head>
<body>
    <button class="layui-btn" id="btn1">点击按钮弹窗</button>
    <button class="layui-btn" id="btn2">alert弹窗</button>
    <button class="layui-btn" id="btn3">confirm弹窗</button>
    <button class="layui-btn" id="btn4">open-type=0[默认]</button>
    <button class="layui-btn" id="btn5">open-type=1[页面层]</button>
    <button class="layui-btn" id="btn6">open-type=2[iframe层]</button>
    <button class="layui-btn" id="btn7">open-type=4[tips层]</button>
    <button class="layui-btn" id="btn8">[tips层]</button>
</body>
<div id="content" style="background-color: #00bfbf;height: 100%;width: 100%;display: none">type=2的open弹出层</div>
<script>
    layui.use([‘layer‘,‘jquery‘],function () {
        // 定义使用jquery和layer
        var $ = layui.jquery;
        var layer = layui.layer;
        // 弹窗
        $("#btn1").click(function () {
            layer.msg("弹出层",{icon:1});
        })
        $("#btn2").click(function () {
            // 普通弹出层
            // layer.alert("alert 弹出层");
            // 弹出带图标的
            layer.alert("带图标的alert弹出层",{icon:4});
        })
        $("#btn3").click(function () {
            layer.confirm(‘is not?‘, {icon: 3, title:‘提示‘}, function(index){
                // 这里可以写点击确定以后的回调方法比如:
                // alert("这是点击确定以后的回调方法" );
                // 或者直接跟layui的弹窗
                layer.msg("这是点击确定以后的回调方法",{icon:1});
                layer.close(index);//关闭弹窗
            });
        })
        // open核心方法弹出层
        // type 类型为0
        $("#btn4").click(function () {
            layer.open({
                type:0,
                // content:"默认弹出信息框[type=0]"
                // 除了默认文字提示以外还可以跟html代码如:
                content:"<p style=‘color: red‘>默认弹出层样式</p>",
                // 还可以添加图标属性
                icon:1,
                // title为标题属性
                title:"标题属性",
                // skin为弹出层的样式皮肤如:
                skin:"layui-layer-lan",
                // area为弹出层的宽高属性
                area:[‘300px‘,‘200px‘],
                // 设置坐标用offset属性[‘top‘,‘left‘] auto 为默认垂直水平居中 r为靠右 l为靠左 t靠顶部 b靠下(规则为:先左右后上下)
                offset:[‘200px‘,‘100px‘],
                // offset:‘rt‘,
                // 关闭按钮样式
                closeBtn:1,//0为不显示,1默认,2带有样式
                // shade为弹出层的遮罩属性shade[‘透明度‘,‘颜色‘]
                shade:[‘0.1‘,‘black‘],
                // 点击遮罩层关闭弹出层属性true为是false为否
                shadeClose:true,
                // time为延时关闭0为不关闭,后面可以跟毫秒数
                time:‘2000‘,
                // anim为动画属性后面跟属性1,2,3,4
                // anim: 0     平滑放大。默认
                // anim: 1     从上掉落
                // anim: 2     从最底部往上滑入
                // anim: 3     从左滑入
                // anim: 4     从左翻滚
                // anim: 5     渐显
                // anim: 6     抖动
                anim:‘6‘,
                // 显示窗口最大化最小化;其对应的弹出层type值为1,2有效
                // maxmin:true,
            })
        })
        // type类型为1
        $("#btn5").click(function () {
            layer.open({
                type:1,
                // type为1可以使用选择器必须将内容层写到body外面;type为0只能使用字符安拼接的标签如:
                content:$("#content"),
                area:["300px","300px"],
                maxmin:true,
                // time:2000,
                // 按钮btn属性作为弹出层的按钮;从而去触发另一个事件
                btn:[‘确定‘,‘重置‘,‘取消‘],
                // 按钮居中用btnalign其值为c(居中),l(居左),r(居右)
                // btnAlign:‘c‘,
                // 为按钮绑定事件
                // 按钮一绑定事件方法如下:
                yes: function(index, layero){
                    layer.msg("按钮确定的回调");
                },
                // 按扭二的回调
                // 按钮三和按钮二用同样的方法,绑定事件以此类推
                btn2: function(index, layero){
                    layer.msg("按钮重置的回调方法")
                },
                btn3: function(index, layero){
                    layer.msg("按钮取消的回调方法")
                    // 当return false 时点击按钮就不会关闭弹出层
                    return false
                },
                // 右上角x按钮关闭的回调
                cancel: function(){
                    //右上角关闭回调
                    layer.msg("右上角关闭按钮的回调")
                    //return false// 开启该代码可禁止点击该按钮关闭
                }
            })
        })
        // type为2的open核心弹出层(iframe弹出层)
        $("#btn6").click(function () {
            layer.open({
                // 当type为2的时候content必须为url
                type:2,
                // content:‘layer.tanchuang.html‘,
                // content除了内部链接以外也可以使用外部链接如:
                content:"http://www.baidu.com",
                // 如果想去除滚动条可以使用这种样式
                // content:["http://www.baidu.com",‘no‘],
                area:[‘1200px‘,‘500px‘],
            })
        })
        // type为3的open核心弹出层
        // tips类型为吸附层多用于教学提示
        $("#btn7").click(function () {
            layer.open({
                type:4,
                content:["这是type=4的tips弹出层样式","#btn7"],
                shadeClose:true,
                // tips是属性为吸附层内容显示在元素的位置;如tips:1在元素下面
                tips:1,
            })
        })
        // 以下也是一种吸附层的弹出
        $("#btn8").click(function(){
            layer.tips(‘只想提示地精准些‘, ‘#btn8‘);
        })
    });
</script>
</html>

 

 

 原文来自于:https://www.cnblogs.com/lxc-bky/p/10064331.html

 

layui 各个弹出层的使用方法

标签:平滑   精准   添加   位置   定义   cancel   nal   放大   max   

原文地址:https://www.cnblogs.com/xiong950413/p/14291453.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!