標(biāo)題位置
  

代碼很簡潔。最外層是一個大的DIV作為彈出層的容器，H4作為DIV彈出層的標(biāo)題，又一個DIV用于彈出層正文內(nèi)容顯示，再一個Div用于放置一些按鈕。

CSS代碼

代碼如下:

.pop-box{  z-index:9999;/*這個數(shù)值要足夠大，才能夠顯示在最上層*/  margin-bottom:3px;  display:none;  position:absolute;  background:#FFF;  border:solid1px#6e8bde;  }   .pop-boxh5{  color:#FFF;  cursor:default;  height:18px;  font-size:14px;  font-weight:bold;  text-align:left;  padding-left:8px;  padding-top:4px;  padding-bottom:2px;  background:url("../images/header_bg.gif")repeat-x00;  }   .pop-box-body{  clear:both;  margin:4px;  padding:2px;  }

JS代碼

代碼如下:

functionpopupDiv(div_id){  vardiv_obj=$("#"+div_id);  varwindowWidth=document.documentElement.clientWidth;  varwindowHeight=document.documentElement.clientHeight;  varpopupHeight=div_obj.height();  varpopupWidth=div_obj.width();  //添加并顯示遮罩層  $("").addClass("mask")  .width(windowWidth*0.99)  .height(windowHeight*0.99)  .click(function(){hideDiv(div_id);})  .appendTo("body")  .fadeIn(200);  div_obj.css({"position":"absolute"})  .animate({left:windowWidth/2-popupWidth/2,  top:windowHeight/2-popupHeight/2,opacity:"show"},"slow");  }   functionhideDiv(div_id){  $("#mask").remove();  $("#"+div_id).animate({left:0,top:0,opacity:"hide"},"slow");  }

到此，相信大家對“怎么用jQuery代碼實現(xiàn)DIV彈出效果”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！