使用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" 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框架下载地址：
layer这个组件确实很好用,主要是使用起来特别方便.
我本人比较常用的时layer.msg() 和 layer.alert() 以及 layer.open();
以上这篇使用layui的layer组件做弹出层的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
详解Layer弹出层样式
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 具体请
-
layer.open组件获取弹出层页面变量、函数的实例
最近做项目遇到个问题 使用layer.open组件弹出层,需要将该弹出层抽取城单独的公共页面,因此需要在主页面获取弹出层页面的相关变量或者函数值. 记录下解决办法. 先来看layer.open函数 再来看弹出层URL对应的页面关键代码 将表单序列化成JS对象的函数是自己封装的一个JS函数,这里就不细说了,也可以自己手动定义个JS对象,自己给该对象添加属性 最后来看主页面调用方式 打印回调函数接收的变量可以看到,获取到弹出层内用户操作的相关数据. 最后,其实关键点就在于获取ifream中指定变量或
-
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
页面A中弹出页面B,在页面B中弹出页面C,在layer做嵌套ifframe弹出时会遇到C页面被嵌套在B页面中,如果C尺寸大于B,则C将不能显示完整.这个时候可以考虑B,C页面均由A页面弹出从而避免嵌套带来的问题.废话少说,直接上代码. 1.A弹出B: 在A.html中插入一下代码 layer.open({ title:'新增账号', type: 2, area: ['700px', '350px'], fixed: false, //不固定 maxmin: false, content:['B.
-
layer 关闭指定弹出层的例子
首先,弹出某个层时需要给层取名(赋值),如: var mylay = layer.open({ type: 2, content: 'layer.html', title: false, area: ['500px', '500px'] }); 需要关闭指定的弹出层时,直接: layer.close(mylay) 如果在弹出层中写js,将弹出层自身关闭,可以先获取到弹出层名字,再将其关闭 var mylay = parent.layer.getFrameIndex(window.name); p
-
使用layui的layer组件做弹出层的例子
官方文档地址: http://www.layui.com/doc/modules/layer.html 本例演示效果: 当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出层</title> <link
-
layer实现关闭弹出层刷新父界面功能详解
本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 最近一个项目采用的是hui前端框架,他的弹出层就是用的layer插件,对于弹出层,有一个操作体验大家都知道,就是关闭弹出层,需要刷新父页面.开始写的时候,我陷入了自己的误区,在弹出层处理成功之后,我调用的是: var index = parent.layer.getF
-
Layer+Echarts构建弹出层折线图的方法
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 在中国可视化生态系统中,ECharts 通过提供方便丰富的可视化图表,极大缩短了用户与数据的距离.个人认为是最好用的可用来生成图表的插件. 现在使用Layer和Echarts构建弹出层折线图. 下载好所需要用到的工具包,Echarts下载为echarts.min.js,Layer在layer官网下载之后将layer文件夹放到项目之中. 在HTML文件中引入
-
uniapp组件uni-popup弹出层的使用
目录 一.基本用法 二.自定义弹出层(dialog + message) 示例 三.提交信息 (input + 延迟关闭) 四.底部分享示例 官方示例:uni-popup 弹出层 - DCloud 插件市场 弹出层组件用于弹出一个覆盖到页面上的内容,使用场景如:底部弹出分享弹窗.页面插屏广告等 一.基本用法 <template> <view> <button type="primary" @click="toggle('top')"&g
-
vue-dialog的弹出层组件
本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回
-
用vue3封装一个符合思维且简单实用的弹出层
目录 前言 服务式弹出层 用Promise来创建吧! 写在后头 前言 在平常开发中,弹出层算是一个最常用的组件了,尤其是后台的表单页,详情页,用户端的各种确认都很适合使用弹出层组件展示,但是一般组件库提供给我们的一般还是组件的形式,或者是一个简单的服务. 组件形式的弹出层,在我看来应该是组件库提供给我们二次封装用的,如果直接其实很不符合直觉 写在页面结构里,但是却不是在页面结构中展示,放在那个位置都不合适只能放在最下边 一个页面如果只有一个弹出层还好维护,多几个先不说放在那里,光维护弹出层的展示
-
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http://layer.layui.com/ 二.多个iframe弹出层(非嵌套) 1.打开iframe弹出层js代码 (1)示例一: layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380p
-
Layui弹出层 加载 做编辑页面的方法
layui是一款优秀的模块化前端框架.利用layui弹出层做编辑页面 先上效果图 基本准备,引入layui的layui.css,layui.js文件 <link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" rel="external nofollow" media="all"> <script src="..