使用layui的layer组件做弹出层的例子


Posted in Javascript onSeptember 27, 2019

官方文档地址: http://www.layui.com/doc/modules/layer.html

本例演示效果:

使用layui的layer组件做弹出层的例子

当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如:

使用layui的layer组件做弹出层的例子

代码实现:

<!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.msg() 和 layer.alert() 以及 layer.open();

以上这篇使用layui的layer组件做弹出层的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
js函数调用的方式
May 06 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
fetch 使用及如何接收JS传值
Nov 11 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
vue选项卡切换登录方式小案例
Sep 27 #Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 #Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 #Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 #Javascript
vue实现倒计时获取验证码效果
Apr 17 #Javascript
通过layer实现可输入的模态框的例子
Sep 27 #Javascript
vue调用语音播放的方法
Sep 27 #Javascript
You might like
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php动态变量定义及使用
2015/06/10 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
企业总经理任命书
2014/06/05 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python