使用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组件做弹出层相关推荐

MUI组件：弹出层组件 - 案例篇
MUI组件:弹出层组件 - 案例篇官方组件 · 演示地址:http://dcloud.io/hellomui/examples/actionsheet.html 动画演示 · 效果图:(按" ...
layui 传递前端请求_layui弹出层如何传值？
layui弹出层如何传值?下面本篇文章给大家介绍一下layui弹窗间的传值(layui弹出层传值)(窗口传值).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 主要有两部分从主窗口传 ...
uniapp组件-uni-popup弹出层
目录一.基本用法二.自定义弹出层(dialog + message) 示例三.提交信息 (input + 延迟关闭) 四.底部分享示例官方示例:uni-popup 弹出层 - DCloud 插 ...
layer.open组件获取弹出层页面变量、函数
为什么80%的码农都做不了架构师?>>> 参考资料: http://blog.csdn.net/qq_32588349/article/details/52618450 htt ...
layui弹出层html,layer弹出层
layer 弹出层,怎么只让他弹出一次.在线等我昨天用这个插件的时候也有这个问题,弹出内容大了就居不了中.这是组件不完美的地方,他设置了top和left值,而且是固定的.这种弹出层都是绝对定位的所 ...
php layui弹出修改功能,非常好用的弹出层 layer，常用功能demo，快速上手！
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用. 老文档地址:http://layer.layui.com/api.html 已经停止维护常用功能代码de ...
layUI弹出层组件使用
首先官网下载layUI或者下载layer.js组件也可以 layer.js组件官网链接 layer 弹出层组件 - jQuery 弹出层插件 (layuiweb.com) 独立组件使用需要引入JQue ...
Layer 弹出层组件
Layer 弹出层组件一.Layer是什么? 用于实现网页中的各种弹出层交互, 如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab ...
layui弹出层，报错：TypeError: layer.open is not a function
在使用layui弹出层时,浏览器出现报错:TypeError: layer.open is not a function 报错错误如图: 修改: 添加 var layer = layui.layer; ...

使用layui的layer组件做弹出层

使用layui的layer组件做弹出层相关推荐

最新文章

热门文章