鱼台网站建设,什么网站可以看到绵阳建设,太原首页推广,京东购物商城官方文档地址: http://www.layui.com/doc/modules/layer.html
本例演示效果: 当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如: 代码实现: !DOCTYPE html
html langen
headmeta charsetUTF-8!DOCTYPE html
html langen
headmeta charsetUTF-8title弹出层/titlelink relstylesheet href/static/layui/css/layui.cssscript src/static/layui/jquery.min.js/script
/head
body
span idpro font size10申请提现/font/span
/bodyscript src/static/layui/layui.js/script
script typetext/javascript$(#pro).on(click,function(){//提现弹窗之前进行一定判断伪代码//上述条件符合之后,弹出提现弹窗layui.use(layer, function() {var layer layui.layer;layer.open({type: 2,// skin: layui-layer-molv,title: 申请提现,content:[/kk.php,no] ,//不允许出现滚动条area:[600px, 400px]});});// });
})/script
/html
kk.php
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet href/static/layui/css/layui.cssscript src/static/layui/jquery.min.js/scriptstyle typetext/css.aa{margin-top: 7%; font-size: 14px;}.bb {margin-top: 10%;}.aa .cc{float: right;margin-top: -11px;position: absolute;right: 30px;top: 50%;}.aa .account{border: 1px solid #10ad15;color:#10ad15;border-radius: 4px;padding: 20px;position: relative;}.txt{width: 410px; margin:30px; font-size: 16px; color: #333;}.layui-btn {display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;background-color: #ffa751;color: #fff;text-align: center;border: none;border-radius: 2px;cursor: pointer;font-size: 16px;vertical-align: middle;margin-left: 25px;}input[typetext]{word-wrap: break-word;width: 240px;height: 38px;border-radius: 4px; padding: 0 5px;border: 1px solid #ddd;display:inline-block; margin:0px 10px;}/style
/head
body!--输入提现金额浮层--
divdiv classtxtspan classbb输入提现金额/spaninput idmoney_request typetext placeholder最多可提现0.00元 maxlength15div classaap提现到建设银行/pdiv classaccount我的建设银行546513212315451i classcc✔/i/div/div/div/div
div classlayui-btn idlayui-btnn确认提现/div/body
script src/static/layui/layui.js/script
script typetext/javascript$(#layui-btnn).on(click,function(){layui.use(layer, function() {var layer layui.layer;//引入layer组件var money_request$(#money_request).val();//获取用户输入的提现金额//判断用户输入的提现金额是否为空if(money_request){layer.msg(请输入提现金额,{icon: 2});return false;}//判断用户输入的提现金额是否大于等于500if(money_request500){layer.msg(提现金额需要大于等于500哦, {// time: 20000, //20s后自动关闭btn: [明白了, 知道了]});return false;}//判断用户的提现金额是否大于拥有的金额//从后台取出该用户拥有多少余额//这里假设是950if(money_request950){layer.msg(提现金额不能大于您的余额哦,{icon: 5});return false;}});});/script
/html
注: 需要用到layui框架,下载到某个地址后,在引入时指向其即可.
layui框架下载地址:
http://www.layui.com/ layer这个组件确实很好用,主要是使用起来特别方便.
我本人比较常用的时layer.msg() 和 layer.alert() 以及 layer.open();
