使用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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
vue router 动态路由清除方式
May 25 Vue.js
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
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP文件操作方法汇总
2015/07/01 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
javascript常用函数(1)
2015/11/04 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
通过C++学习Python
2015/01/20 Python
Python冲顶大会 快来答题!
2018/01/17 Python
int在python中的含义以及用法
2019/06/27 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
如何理解Python中的变量
2020/06/01 Python
python 下载文件的几种方法汇总
2021/01/06 Python
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
预备党员党校学习自我评价分享
2013/11/12 职场文书
采购主管的岗位职责
2013/12/17 职场文书
十八大感想感言
2014/02/10 职场文书
知识竞赛主持词
2014/03/26 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2016新党章学习心得体会
2016/01/15 职场文书