點選彈出居中登陸框

admin發表於2019-02-01

當前流行彈出居中視窗效果,不但提示框是這樣,註冊或者登陸框也大量如此。

下面就通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[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()方法一章節。

相關文章