點選彈出居中登陸框
當前流行彈出居中視窗效果,不但提示框是這樣,註冊或者登陸框也大量如此。
下面就通過程式碼例項介紹一下如何實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>點選彈出登入視窗程式碼-螞蟻部落</title> <style type="text/css"> body{ font-size:13px; } ul{list-style:none;} #lean_overlay{ position:fixed; z-index:100; top:0px; left:0px; height:100%; width:100%; background:#000; display:none; } #OpenWindow{ background:none repeat scroll 0 0 #FFFFFF; border-radius:5px 5px 5px 5px; box-shadow:0 0 4px rgba(0, 0, 0, 0.7); display:none; padding-bottom:2px; width:404px; z-index:11000; left:50%; margin-left:-202px; opacity:1; position:fixed; top:200px; } #OpenWindow-header{ background: url("mytest/jQuery/hd-bg.png") repeat scroll 0 0 transparent; border-bottom: 1px solid #CCCCCC; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 18px 18px 14px; } .modal_close{ background:url("mytest/jQuery/modal_close.png") repeat scroll 0 0 transparent; display:block; height:14px; position:absolute; right:12px; top:12px; width:14px; z-index:2; } #OpenWindow .txt-fld{ border-bottom:1px solid #EEEEEE; padding:14px 20px; position:relative; text-align:right; width:364px; } #OpenWindow .txt-fld input{ background:none repeat scroll 0 0 #F7F7F7; border-color:#CCCCCC #E7E6E6 #E7E6E6 #CCCCCC; border-radius:4px 4px 4px 4px; border-style:solid; border-width:1px; color:#222222; font-family:"Helvetica Neue"; font-size:1.2em; outline:medium none; padding:8px; width:244px; } #OpenWindow .txt-fld input.good_input{ background:url("mytest/jQuery/good.png") no-repeat scroll 236px center #DEF5E1; } #OpenWindow .btn-fld{ overflow:hidden; padding:12px 20px 12px 130px; width:254px; } button{ background:none repeat scroll 0 0 #3F9D4A; border:medium none; border-radius:4px 4px 4px 4px; color:#FFFFFF; float:right; font-family:Verdana; font-size:13px; font-weight:bold; overflow:visible; padding:7px 10px; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); width:auto; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({leanModal:function(options){ var defaults={top:100,overlay:0.5,closeButton:null}; var overlay=$("<div id='lean_overlay'></div>"); $("body").append(overlay); options=$.extend(defaults, options); return this.each(function(){ var o=options; $(this).click(function(e){ var modal_id=$(this).attr("href"); $("#lean_overlay").click(function(){ close_modal(modal_id) }); $(o.closeButton).click(function(){ close_modal(modal_id) }); var modal_height=$(modal_id).outerHeight(); var modal_width = $(modal_id).outerWidth(); $("#lean_overlay").css({"display": "block",opacity:0}); $("#lean_overlay").fadeTo(200,o.overlay); $(modal_id).css({ "display":"block", "position":"fixed", "opacity":0, "z-index":500, "left":50+"%", "margin-left":-(modal_width/2)+"px", "top":o.top+"px" }); $(modal_id).fadeTo(200, 1); e.preventDefault() }) }); function close_modal(modal_id) { $("#lean_overlay").fadeOut(200); $(modal_id).css({"display":"none"}) } } }) })(jQuery); $(document).ready(function () { $('a[rel*=leanModal]').leanModal({top:100,closeButton:".modal_close"}); }); </script> </head> <body> <div style="text-align:center"> <ul> <li><a id="aOpen" href="#OpenWindow" rel="leanModal">開啟登陸視窗</a></li> </ul> </div> <div id="OpenWindow"> <div id="signup-ct"> <div id="OpenWindow-header"> <h2>Create a new account</h2> <p>It's simple, and free.</p> <a href="#" class="modal_close"></a> </div> <form action=""> <div class="txt-fld"> <label for=""> Username</label> <input type="text" name="" class="good_input" id="" /> </div> <div class="txt-fld"> <label for=""> Email address</label> <input type="text" name="" id="" /> </div> <div class="txt-fld"> <label for=""> Password</label> <input type="text" name="" id="" /> </div> <div class="btn-fld"> <button type="submit"> Sign Up »</button> </div> </form> </div> </div> </body> </html>
當點選文字的時候能夠彈出一個登入視窗,並且帶有遮罩的形式,下面介紹一下實現過程。
一.實現原理:
使用$.fn.extend方法為jQuery物件新增leanModal方法,此方法可以建立一個遮罩層,預設狀態是隱藏的;為連結註冊click事件處理函式,此函式為遮罩層和關閉按鈕註冊click事件處理函式;點選遮罩層和關閉按鈕的時候都可以隱藏彈出框,同時將彈出框設定居中顯示。
二.程式碼註釋:
(1).(function($){})(jQuery),建立並執行一個匿名函式,引數是jQuery,這樣可以防止和其他庫實現的$衝突。
(2).$.fn.extend({leanModal:function(options){}),為jQuery物件新增一個函式。
(3).var defaults={top:100,overlay:0.5,closeButton:null},預設的引數值。
(4).var overlay=$("<div id='lean_overlay'></div>"),建立一個div節點元素,這個就作為半透明遮罩。
(5).$("body").append(overlay),為body新增上面建立的節點元素。
(6).options=$.extend(defaults,options),擴充套件原來的預設引數物件。
(7).return this.each(function(){}),返回函式的返回值,注意這裡的this指向jQuery物件。
(8).var o=options,將擴充套件後的引數物件賦值給o。
(9).$(this).click(function(e){}),這裡的$(this)指向呼叫leanModal函式的物件,這裡就是指向連結。
(10).var modal_id=$(this).attr("href"); ,獲取連結的href屬性值。
(11).$("#lean_overlay").click(function(){}),為遮罩層物件註冊click事件處理函式。
(12).close_modal(modal_id),呼叫此函式,引數值是登陸框外圍div的id屬性值,此函式可以將遮罩層和彈出框隱藏。
(13).$(o.closeButton).click(function(){}),為關閉按鈕註冊click事件處理函式,和上面的作用相同。
(14).var modal_height=$(modal_id).outerHeight(),獲取彈出框的高度。
(15).var modal_width = $(modal_id).outerWidth(),獲取彈出框的寬度。
(16).$("#lean_overlay").css({"display":"block",opacity:0}),將遮罩層設定為顯示並完全透明。
(17).$("#lean_overlay").fadeTo(200,o.overlay),在200毫秒內將遮罩層設定為半透明。
(18).$(modal_id).css({}),設彈出的樣式值。
(19)."display":"block",將彈出框設定為可見。
(20)."position":"fixed",將彈出框的定位方式設定為fixed。
(21)."opacity":0,將彈出框設定為透明。
(22). "z-index":1100,將彈出框的z-index屬性值為1100。
(23)."left":50+"%",將left屬性值設定為50%。
(24)."margin-left":-(modal_width/2)+"px",將彈出框再向左移動二分之一的寬度,這樣就水平居中了。
(25)."top": o.top+"px",top屬性值設定為100px。
(26).$(modal_id).fadeTo(200,1),在200毫秒內讓彈出框設定為不透明。
(27).e.preventDefault(),阻止預設動作,否則將會有跳轉動作,當然在這裡可能看不出來,如果有出現滾動條的話,就很明顯了。
三.相關閱讀:
(1).$.fn.extend()函式可以參閱$.extend()和$.fn.extend()區別一章節。
(2).append()函式可以參閱jQuery append()一章節。
(3).$.extend()函式可以參閱$.extend()用法一章節。
(4).each()函式可以參閱jQuery each()一章節。
(5).click事件可以參閱jQuery click事件一章節。
(6).attr()函式可以參閱jQuery attr()方法一章節。
(7).outerHeight()函式可以參閱jQuery outerHeight()方法一章節。
(8).outerWidth()函式可以i參閱jQuery outerWidth()方法一章節。
(9).css()函式可以參閱jQuery css()方法一章節。
(10).fadeTo()函式可以參閱jQuery fadeTo()方法一章節。
(11).preventDefault()函式可以參閱jQuery event.preventDefault()方法一章節。
相關文章
- 點選彈出居中使用者登入框效果
- 點選刪除按鈕彈出是否刪除提示框
- 滑鼠點選區域外 彈框隱藏
- 登陸框select繞過
- 短視訊商城系統,系統提示框、確認框、點選空白關閉彈出框
- 短視訊系統原始碼,點選選擇框,底部彈出可以選擇的選項原始碼
- Layui Confirm彈出框連續點選按鈕會觸發多次事件UI事件
- JavaScript文字框獲取焦點彈出tipsJavaScript
- 滑鼠移動 登陸框跟隨
- 單點登陸
- Flutter | 超實用簡單選單彈出框 PopupMenuButtonFlutter
- 直播軟體原始碼,選項提供多選專案,彈出多選框原始碼
- element ui el-time-select 在點選常規輸入框後觸發彈出UI
- 金蝶雲星空——過濾介面文字框彈出選單介面
- JavaScript點選按鈕彈出層效果JavaScript
- jQuery點選小圖彈出大圖jQuery
- TextView自定義輕鬆實現下劃線、點選彈框TextView
- 短視訊平臺開發,點選輸入框時自動彈出軟鍵盤
- sweetalert 彈出框瞬間消失
- 登入框設計點
- 14、sso單點登陸
- windows使用sourceTree克隆個人私有github,一直彈出登入框?WindowsGithub
- <span>小程式授權登入彈框</span>
- jquery搜尋下拉提示框/登陸賬號下拉提示框jQuery
- Qt 讓彈出的視窗居中顯示QT
- 彈框
- 直播商城原始碼,AlertDialog.Builder 設定點選不關閉彈框原始碼UI
- 盤點Mysql的登陸方式MySql
- 直播系統程式碼,點選選擇欄,彈出各個選項
- 帶有半透明背景居中彈出層詳解
- 點選底部input輸入框,彈出的軟鍵盤擋住input(蘋果手機使用第三蘋果
- 彈射回合登場!《蟲蟲物語》今日正式登陸iOS端iOS
- vux和iview的彈出框總結UXView
- Android Dialog風格彈出框的ActivityAndroid
- JavaScript 動畫方式彈出圓角框JavaScript動畫
- Element-Ui元件(四十)Popover 彈出框UI元件
- 2019最佳彈窗/彈出框設計20例【附教程】
- 短視訊直播系統,選擇選項時,點選出現下拉框