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

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

本例演示效果：

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

代码实现：

  
  
  
  


申请提现

 

kk.php

  
  
  
  
  
    .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;
    }
 
  


 


  
    输入提现金额
    
    
      
提现到建设银行
      我的建设银行（546513212315451）✔
    
  
 

确认提现
 

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

layui框架下载地址：

http://www.layui.com/

layer这个组件确实很好用,主要是使用起来特别方便.

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

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