资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么在layui中利用layer组件实现一个弹出层

这期内容当中小编将会给大家带来有关怎么在layui中利用layer组件实现一个弹出层,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创新互联是一家专注于网站制作、成都网站制作与策划设计,文峰网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:文峰等地区。文峰做网站价格咨询:18982081108

代码实现:




  
  弹出层
  
  


申请提现

 


 
  $('#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']
      });
    });
 
  // });
})
  

kk.php




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

上述就是小编为大家分享的怎么在layui中利用layer组件实现一个弹出层了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


网页标题:怎么在layui中利用layer组件实现一个弹出层
标题来源:http://cdkjz.cn/article/ipjchp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220