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弹出框初体验的主要内容,如果未能解决你的问题,请参考以下文章