layer弹出框初体验

Posted 脑袋空空空想家

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layer弹出框初体验相关的知识,希望对你有一定的参考价值。

今天有需要用到了layer弹出框,要求:制作一个如图所示的弹出框:

首先,查看官方文档,官方演示讲解文档,链接

 关于皮肤设置拓展,链接

 

使用layer.alert(),默认标题是“信息”,还有配色不符合我的要求,

所以着手改标题和皮肤

标题用title:\'\';控制,因为是局部改变,直接在内部使用skin:\'\';在layer.css加上自定义的标题背景色,和按钮色

默认的弹窗框大小需要修改,用area[‘280px’,‘150px’];控制,但是按钮会跑到框外,于是改为area[‘280px’,‘auto’];

新的问题: content 部分会出现滚动条,不美观,修改layer.css layui-layer-content{overflow-y:hidden}

html页面部分代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer</title>
    <script src="js/jquery.min.js"></script>
    <script src="layer.js"></script>
</head>
<body>
<script>
layer.alert(
    \'发布任务成功!\',
    {
        icon:1,
        title:\'消息\',
        area:[\'280px\',\'auto\'],
        skin:\'layui-layer-demo\'
    });
</script>
</body>
</html>

layer.css添加修改的代码:

 也可使用layer.open();

如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer</title>
    <script src="js/jquery.min.js"></script>
    <script src="layer.js"></script>
</head>
<body>
<script>
layer.open({
    type: 0,
    title:\'消息\',
    icon: 1,
    content:\'发布任务成功!\',
    scrolling: \'no\',
    area:[\'280px\',\'auto\'],
    skin: \'layui-layer-demo\'
    });
</script>
</body>
</html>

 

以上是关于layer弹出框初体验的主要内容,如果未能解决你的问题,请参考以下文章

layer弹出框为确定按钮绑定事件访问后台

layer弹出层里面的按钮怎么关闭当前弹出框

使用layer插件为啥弹出框没点确定就自动消失了

toast弹出框效果

layer.open怎么设置弹出框之后,父窗口呈现灰色

layer弹出框