使用layui的layer组件做弹出层
生活随笔
收集整理的這篇文章主要介紹了
使用layui的layer组件做弹出层
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
官方文檔地址:?http://www.layui.com/doc/modules/layer.html
本例演示效果:
?
當點擊申請提現時,出現申請提現框,并根據用戶輸入進行一些判斷,給出友好提示,比如:
代碼實現:
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>彈出層</title><link rel="stylesheet" href="/static/layui/css/layui.css"><script src="/static/layui/jquery.min.js"></script> </head> <body> <span id="pro" ><font size="10">申請提現</font></span> </body><script src="/static/layui/layui.js"></script> <script type="text/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 lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="/static/layui/css/layui.css"><script src="/static/layui/jquery.min.js"></script><style type="text/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[type="text"]{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><!--輸入提現金額浮層--> <div><div class="txt"><span class="bb">輸入提現金額</span><input id="money_request" type="text" placeholder="最多可提現0.00元" maxlength="15"><div class="aa"><p>提現到建設銀行</p><div class="account">我的建設銀行（546513212315451）<i class="cc">?</i></div></div></div></div> <div class="layui-btn" id="layui-btnn">確認提現</div></body> <script src="/static/layui/layui.js"></script> <script type="text/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_request<500){layer.msg('提現金額需要大于等于500哦', {// time: 20000, //20s后自動關閉btn: ['明白了', '知道了']});return false;}//判斷用戶的提現金額是否大于擁有的金額//從后臺取出該用戶擁有多少余額//這里假設是950if(money_request>950){layer.msg('提現金額不能大于您的余額哦',{icon: 5});return false;}});});</script> </html>注: 需要用到layui框架,下載到某個地址后,在引入時指向其即可.
layui框架下載地址:?
http://www.layui.com/
?
layer這個組件確實很好用,主要是使用起來特別方便.
我本人比較常用的時layer.msg() 和 layer.alert() 以及 layer.open();
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的使用layui的layer组件做弹出层的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Git的使用(推荐命令行模式)
- 下一篇： layui弹出层使用(layer.ale