layer如何實現(xiàn)登錄彈框,登錄成功后關(guān)閉彈框并調(diào)用父窗口功能

這篇文章主要介紹layer如何實現(xiàn)登錄彈框,登錄成功后關(guān)閉彈框并調(diào)用父窗口功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

layer是一款近年來備受青睞的web彈層組件，官網(wǎng)地址是：http://layer.layui.com/

可以從官網(wǎng)上下載最新版本.

使用layer實現(xiàn)登錄彈框，登錄成功以后關(guān)閉彈框，并調(diào)用父窗口方法。

1.界面如下：

2.login.html的界面主要代碼:

 <div class="layer_form">
  <div class="form_item">
   <label>手機號碼：</label>
   <div class="form_item_input">
    <input type="text" id="username" placeholder="手機號碼" class="input_long"/>
   </div>
   <i class="red">*</i>
  </div>
  <div class="form_item">
   <label>密 碼：</label>
   <div class="form_item_input">
    <input type="password" id="password" placeholder="請輸入密碼" class="input_long"/>
   </div>
   <i>*</i>
  </div>
  <div class="form_item">
   <label>驗證碼：</label>
   <div class="form_item_input">
    <input type="password" id="validateCode" placeholder="請輸入驗證碼" class="input_short"/>
   </div>
   <a href="#" rel="external nofollow" class="form_item_code" title="看不清換一張"></a>
   <i>*</i>
  </div>

3.點擊登錄按鈕，登錄成功以后，調(diào)用父窗口的方法，并關(guān)閉彈窗，其js代碼如下（這段代碼是嵌入在login.html中）：

<script type="text/javascript">
  $(function () {
   $('#loginBtn').click(function () {
    var username = $.trim($("#username").val());//獲取用戶名
    var password = $.trim($("#password").val());
    var validateCode = $.trim($("#validateCode").val());
 
    var url = '登錄請求的url路徑';
    var param = {"username": username, "password": password, "validateCode": validateCode};
 
    $.post(url, param, function(data) {
     if (data == "0") {
      //調(diào)用父窗口的function addPersonalCenter(){}方法，在父窗口右上角增加一個個人中心按鈕
      window.parent.addPersonalCenter();
      // 先獲取窗口索引，才能關(guān)閉窗口
      var index = parent.layer.getFrameIndex(window.name);
      parent.layer.close(index);
     } else {
      alert("登錄失??！");
     }
    });
   });
  });
</script>

3.父窗口的layer彈框代碼（layer.js的引入省略），一般是點擊登錄按鈕，跳出登錄彈框：

  $(function(){
      $('#u_login').on('click', function(){
       layer.open({
        type: 2,
        title: '用戶登錄',
        maxmin: true,
        skin: 'layui-layer-lan',
        shadeClose: true, //點擊遮罩關(guān)閉層
        area : ['400px' , '280px'],
        content:'login.html'//彈框顯示的url
       });
      });

以上是“l(fā)ayer如何實現(xiàn)登錄彈框,登錄成功后關(guān)閉彈框并調(diào)用父窗口功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！