使用layui的layer組件做彈出層的例子

更新時間：2019年09月27日 10:23:22 作者：m_nanle_xiaobudiu

今天小編就為大家分享一篇使用layui的layer組件做彈出層的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

本例演示效果：

當點擊申請?zhí)岈F(xiàn)時,出現(xiàn)申請?zhí)岈F(xiàn)框,并根據(jù)用戶輸入進行一些判斷,給出友好提示,比如:

代碼實現(xiàn)：

<!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">申請?zhí)岈F(xiàn)</font></span>
</body>
 
<script src="/static/layui/layui.js"></script>
<script type="text/javascript">
 
  $('#pro').on('click',function(){
    //提現(xiàn)彈窗之前進行一定判斷偽代碼
    //上述條件符合之后,彈出提現(xiàn)彈窗
    layui.use('layer', function() {
      var layer = layui.layer;
      layer.open({
        type: 2,
        // skin: 'layui-layer-molv',
        title: '申請?zhí)岈F(xiàn)',
        content:['/kk.php','no'] ,//不允許出現(xiàn)滾動條
        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>
 
<!--輸入提現(xiàn)金額浮層-->
<div>
  <div class="txt">
    <span class="bb">輸入提現(xiàn)金額</span>
    <input id="money_request" type="text" placeholder="最多可提現(xiàn)0.00元" maxlength="15">
    <div class="aa">
      <p>提現(xiàn)到建設(shè)銀行</p>
      <div class="account">我的建設(shè)銀行（546513212315451）<i class="cc">✔</i></div>
    </div>
  </div>
 
</div>
<div class="layui-btn" id="layui-btnn">確認提現(xiàn)</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();//獲取用戶輸入的提現(xiàn)金額'
 
      //判斷用戶輸入的提現(xiàn)金額是否為空
      if(money_request==''){
        layer.msg('請輸入提現(xiàn)金額',{icon: 2});
        return false;
      }
 
      //判斷用戶輸入的提現(xiàn)金額是否大于等于500
      if(money_request<500){
        layer.msg('提現(xiàn)金額需要大于等于500哦', {
          // time: 20000, //20s后自動關(guān)閉
          btn: ['明白了', '知道了']
        });
        return false;
      }
 
      //判斷用戶的提現(xiàn)金額是否大于擁有的金額
      //從后臺取出該用戶擁有多少余額
      //這里假設(shè)是950
      if(money_request>950){
        layer.msg('提現(xiàn)金額不能大于您的余額哦',{icon: 5});
        return false;
      }
 
    });
 
  });
  
</script>
</html>

注: 需要用到layui框架,下載到某個地址后,在引入時指向其即可.

layui框架下載地址：

http://www.layui.com/

layer這個組件確實很好用,主要是使用起來特別方便.

我本人比較常用的時layer.msg() 和 layer.alert() 以及 layer.open();

以上這篇使用layui的layer組件做彈出層的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: