這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在layui中利用layer組件實現(xiàn)一個彈出層,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、成都網(wǎng)站制作與策劃設(shè)計,文峰網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:文峰等地區(qū)。文峰做網(wǎng)站價格咨詢:18982081108
代碼實現(xiàn):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈出層</title>
<link rel="stylesheet" href="/static/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
<script src="/static/layui/jquery.min.js"></script>
</head>
<body>
<span id="pro" ><font size="10">申請?zhí)岈F(xiàn)</font></span>
</body>
<script src="/static/layui/layui.js"></script>
<script type="text/javascript">
$('#pro').on('click',function(){
//提現(xiàn)彈窗之前進行一定判斷偽代碼
//上述條件符合之后,彈出提現(xiàn)彈窗
layui.use('layer', function() {
var layer = layui.layer;
layer.open({
type: 2,
// skin: 'layui-layer-molv',
title: '申請?zhí)岈F(xiàn)',
content:['/kk.php','no'] ,//不允許出現(xiàn)滾動條
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" rel="external nofollow" rel="external nofollow" >
<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>
<!--輸入提現(xiàn)金額浮層-->
<div>
<div class="txt">
<span class="bb">輸入提現(xiàn)金額</span>
<input id="money_request" type="text" placeholder="最多可提現(xiàn)0.00元" maxlength="15">
<div class="aa">
<p>提現(xiàn)到建設(shè)銀行</p>
<div class="account">我的建設(shè)銀行(546513212315451)<i class="cc">?</i></div>
</div>
</div>
</div>
<div class="layui-btn" id="layui-btnn">確認(rèn)提現(xiàn)</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();//獲取用戶輸入的提現(xiàn)金額'
//判斷用戶輸入的提現(xiàn)金額是否為空
if(money_request==''){
layer.msg('請輸入提現(xiàn)金額',{icon: 2});
return false;
}
//判斷用戶輸入的提現(xiàn)金額是否大于等于500
if(money_request<500){
layer.msg('提現(xiàn)金額需要大于等于500哦', {
// time: 20000, //20s后自動關(guān)閉
btn: ['明白了', '知道了']
});
return false;
}
//判斷用戶的提現(xiàn)金額是否大于擁有的金額
//從后臺取出該用戶擁有多少余額
//這里假設(shè)是950
if(money_request>950){
layer.msg('提現(xiàn)金額不能大于您的余額哦',{icon: 5});
return false;
}
});
});
</script>
</html>上述就是小編為大家分享的怎么在layui中利用layer組件實現(xiàn)一個彈出層了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁標(biāo)題:怎么在layui中利用layer組件實現(xiàn)一個彈出層
文章鏈接:http://chinadenli.net/article48/ipjchp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、做網(wǎng)站、外貿(mào)建站、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)