layer.open弹窗位置的修改

最新推荐文章于 2024-09-10 13:59:09 发布

Oct.cake

最新推荐文章于 2024-09-10 13:59:09 发布

阅读量2.4k

点赞数 1

分类专栏： layui 文章标签： layui

本文链接：https://blog.youkuaiyun.com/m0_46604319/article/details/123671307

版权

layui 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了layui弹窗layer.open的offset参数用法，包括如何实现水平居中、上弹出、设定具体距离及左右下弹出等效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

offset-坐标

offset:'auto' ————默认水平居中弹出

offset:'t' ————上弹出

offset:'100px' ————距离上方100px弹出

offset:'l'————左弹出

offset:'r'————右弹出

offset:'b'————下弹出

offset:'rb'————右下弹出

offset:['100px','50px']————距离上方100px,左边50px弹出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>弹出层</title>
        <link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/>
        <script type="text/javascript" src="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/layui.js" charset="UTF-8"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>
    <body align="center">
        <button class="layui-btn" id="demo">点击</button>
 
        <script type="text/javascript">
            layui.use('layer',function(){
                var layer=layui.layer;
                var $ = layui.jquery;
            
                $("#demo").click(function(){
                    top.layer.open({
                        type:2,
                        title:"个人信息",
                        area:['400px','600px'],
                        shade:0.4,
                        offset:['100px','100px']
                    })
                });
                
            })
        </script>
    </body>
</html>