layui弹框

最新推荐文章于 2025-04-23 11:15:02 发布

u010082526

最新推荐文章于 2025-04-23 11:15:02 发布

阅读量549

点赞数

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/u010082526/article/details/89472030

版权

layui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了layui弹窗的使用，包括layer.open用于打开弹窗，layer.prompt创建带有输入框的弹窗，以及layer.confirm用于显示确认对话框。通过示例展示了如何在弹窗中添加操作，如点击按钮关闭弹窗，以及自定义标题。

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

http://layer.layui.com/api.html

https://www.layui.com/demo/layer.html

【1】layer.open

function uploadfile() {
    //window.open(this.href, '', 'width=255,height=255');
    layer.open({
        type: 2,
        skin: 'layui-layer-demo', //样式类名
        title: '',
        closeBtn: 0, //不显示关闭按钮
        anim: 2,
        area: ['680px', '380px'],
        shadeClose: true, //开启遮罩关闭
        content: 'img.html'
    });
   
}

layui点击按钮关闭当前页面、关闭弹窗

<div style="position:absolute;z-index:99;background-color: rgba(0, 0, 0,0);top:10px;left:600px;width:60px;height:40px;" id="closeImg">

$("#closeImg").click(function () {
        
        //关闭当前页
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    });

【2】layer.prompt

layer.prompt添加多个输入框

layer.prompt(
                {
                    formType: 2,
                    value: data.name,
                    title: "审核"
                },
            function (value, index) {
                obj.update({
                    name: value
                });
                layer.close(index);
            });
            $(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"审核人\"/>")

【3】layer.confirm

layer.confirm标题修改

layer.confirm('下载该文件',
{title:"下载"},
function (index) {
obj.del();
layer.close(index);
});