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

更新時間：2019年09月11日 09:50:41 作者：Beauxie

今天小編就為大家分享一篇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>手機(jī)號碼：</label>
   <div class="form_item_input">
    <input type="text" id="username" placeholder="手機(jī)號碼" 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
       });
      });

以上只是主要代碼，必須先引入JQuery與layer.js，僅供參考。

以上這篇layer實現(xiàn)登錄彈框,登錄成功后關(guān)閉彈框并調(diào)用父窗口的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: