本文介绍如何使用Layui框架中的Layer组件实现自定义弹出层功能。通过示例演示点击按钮触发申请提现弹窗，并在弹窗内集成表单验证逻辑，如判断提现金额是否超过用户余额，提供友好的错误提示。文章包含完整的HTML与JavaScript代码实现，适用于需要快速集成轻量级弹窗交互的Web开发场景。
Layui Layer组件简介与引用
Layui官方文档地址为：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" rel="external nofollow" rel="external nofollow" >
<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" 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>
<!--输入提现金额浮层-->
<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;
}
//判断用户输入的提现金额是否大于等于500
if(money_request<500){
layer.msg('提现金额需要大于等于500哦', {
// time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
return false;
}
//判断用户的提现金额是否大于拥有的金额
//从后台取出该用户拥有多少余额
//这里假设是950
if(money_request>950){
layer.msg('提现金额不能大于您的余额哦',{icon: 5});
return false;
}
});
});
</script>
</html>
注意：此实现依赖于Layui框架。你需要将框架下载至指定目录，并在代码中正确引用其路径。
Layui框架的官方下载地址为：
http://www.layui.com/
Layer组件确实非常实用，其最大优势在于使用便捷。
我在日常开发中经常使用的Layer方法包括 layer.msg()、layer.alert() 以及 layer.open();
以上关于使用Layui Layer组件制作弹出层的示例内容即为全部分享，希望能对读者有所帮助，也欢迎大家继续支持本站。