官方文档地址：http://www . layui.com/doc/modules/layer . html

本例演示效果：

当点击申请提现时，出现申请提现框，并根据用户输入进行一些判断，给出友好提示，比如：

代码实现：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题弹出层/title link rel='样式表href='/static/layui/CSS/layui。CSS ' rel='外部nofollow' rel='外部no follow ' script src=' http :/static/layui/jquery。量滴js '/script/head dyspan id=' pro ' font size=' 10 '申请提现/font/span/body script src=' http :/static/layui/layui。js '/script脚本类型=' text/JavaScript ' $(' # pro ').on('click '，function(){ //提现弹窗之前进行一定判断伪代码//上述条件符合之后，弹出提现弹窗layui.use('layer '，function(){ var layer=layui。层；layer.open({ type: 2，//skin: 'layui-layer-molv '，title: '申请提现，content:['/kk.php '，' no']，//不允许出现滚动条area:['600px '，' 400 px ']})；});//});}) /script/htmlkk.php

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title link rel='样式表href='/static/layui/CSS/layui。CSS ' rel=' external nofollow ' rel=' external nofollow '脚本src=' http :/static/layui/jquery。量滴js '/脚本样式类型=' text/CSS ' .aa {保证金-最高： 7%；font-size : 14px} .bb {保证金-最高： 10%；} .aa .cc{ float:右侧；边距-top :-11px；绝对位置：right : 30pxtop : 50%；} .aa .帐户{ border : 1px solid # 10 ad 15颜色： # 10 ad 15边界半径： 4pxpadding: 20px相对位置：} .txt { width : 410 pxmargin 336030 pxfont-size : 16px；color: # 333}。layui-BTN { display : inline-block；高度： 38px线高： 38pxpadding: 0 18px背景-颜色： # FFA 751color: # fff文本对齐：中心；border:无；边界半径： 2px光标：指针；font-size : 16px垂直对齐： 中间；左边距left : 25px } input[type=' text ']{自动换行：宽度： 240像素；高度： 38pxborder-半径： 4pxpadding: 0 5pxborder: 1px固体# ddddisplay :内嵌块；margin :0 px 10px }/样式/头模！-输入提现金额浮层-div div class=' txt ' span class=' bb '输入提现金额/span输入id='money_request '类型=“文本”占位符='最多可提现0.00元maxlength='15' div class='aa' p提现到建设银行/p div class='account '我的建设银行(546513212315451)I类=' cc '/I/div/div/div/div类=' layui-BTN ' id=' layui-btnn '确认提现/div/body脚本src=' http :/static/layui/layui。js '/script脚本类型=' text/JavaScript ' $(' # layui-btnn ').on('click '，function(){ layui.use('layer '，function(){ var layer=layui。层；//引入层组件var money _ request=$(' # money _ request ').val()；//获取用户输入的提现金额' //判断用户输入的提现金额是否为空if(money _ request==' '){ layer。“msg(”请输入提现金额，{ icon : 2 })；返回false} //判断用户输入的提现金额是否大于等于500 if(money _ request 500){ layer。“msg(”提现金额需要大于等于500哦，{ //time: 20000，//20s后自动关闭btn: ['明白了', '知道了'] });返回false} //判断用户的提现金额是否大于拥有的金额//从后台取出该用户拥有多少余额//这里假设是950 if(money _ request 950){ layer。“msg(”提现金额不能大于您的余额哦，{ icon : 5 })；返回false } })；});/script/html注： 需要用到获得框架，下载到某个地址后，在引入时指向其即可。

获得框架下载地址：

http://www.layui.com/

层这个组件确实很好用，主要是使用起来特别方便。

我本人比较常用的时layer.msg()和layer.alert()以及层。open()；

以上这篇使用获得的层组件做弹出层的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。