使用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 相关文章推荐
关于javascript document.createDocumentFragment()
Apr 04 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
vue中实现图片压缩 file文件的方法
May 28 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中的路径问题与set_include_path使用介绍
2014/02/11 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Flask框架信号用法实例分析
2018/07/24 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
详解Django中异步任务之django-celery
2020/11/05 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Python文件操作的面试题
2013/06/22 面试题
Java软件工程师综合面试题笔试题
2013/09/08 面试题
清明节扫墓活动方案
2014/03/02 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
民事起诉书范本
2015/05/19 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
详解SQL的窗口函数
2022/04/21 Oracle