jquery 點擊彈出層

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<?php教程
/*超簡潔完美遮罩彈出層,無視解析度,頁面高度任意,彈出層高度任意
* 唯一需要注意的是如果css教程寫的不標準.那麼頁面body的實際高度就不一定要是頁面真實高度.位置高度就無法計算準確.
*/
?>
<script type="text/網頁特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style></style>
<body>
<br /><br /><br /><br /><br /><br /><br />
<a id="a" href="javascript:viod(0)">彈出</a>
<div class="d" style="z-index: 100; display:none"></div>
<div id="b" style="width:650px; height:650px; background:#ccc; display:none">這是彈出層<a id="c" href="javascript:viod(0)">關閉</a></div>
</body>
<script>
$(document).ready(function(){
// .d是遮罩層層
// #b是彈出層
$("#a").bind("click",function(){
  //這裡是body_height
  if($('body').height() < $(window).height()){
   var body_height = $(window).height();
  }else{
   var body_height = $(document).height();
  }
  var left = $(window).width();
  var layer_height = $('#b').height();
  var layer_width = $('#b').width();
  $("#b").css("position","absolute");
  $("#b").css("top",(body_height-$(window).height()+($(window).height()-layer_height)/2));
  $("#b").css("left",(left-layer_width)/2);
  $(".d").css("height",$(document).height());
  $("#b").fadein('fast');
  $(".d").show();
});
$("#c").bind("click",function(){
  $("#b").hide();
  $(".d").hide();
});
});
</script>

源碼下載
http://down.111cn.net/down/code/jquery/2010/1009/21116.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery 點擊彈出層

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support