layer是一款近年來備受青睞的web彈層組件，官網地址是：http://layer.layui.com/
可以從官網上下載最新版本.
使用layer實現登錄彈框，登錄成功以后關閉彈框，并調用父窗口方法。
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.點擊登錄按鈕，登錄成功以后，調用父窗口的方法，并關閉彈窗，其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") { //調用父窗口的function addPersonalCenter(){}方法，在父窗口右上角增加一個個人中心按鈕 window.parent.addPersonalCenter(); // 先獲取窗口索引，才能關閉窗口 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, //點擊遮罩關閉層 area : ['400px' , '280px'], content:'login.html'//彈框顯示的url }); });以上只是主要代碼，必須先引入JQuery與layer.js，僅供參考。
以上這篇layer實現登錄彈框,登錄成功后關閉彈框并調用父窗口的例子就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
