http://blog.163.com/qiuxinke2006@126/blog/static/24885580201131763139536/
http://hi.baidu.com/kilwin/blog/item/f4cfaf2695375920c9955947.html
?
用div層代替傳統的彈出窗口已經變得很普遍了，因為div層是網頁的一部分，不會像傳統的彈出窗口那樣容易被瀏覽器攔截。我們常見的彈出div層就是在頁面加載后或者點擊頁面的某個鏈接時彈出一個div層，同時頁面的其他地方會變灰。那么今天我就試著用jquery來實現這個效果。
通過今天的jquery實例學習，我們要達到這樣的效果：點擊頁面的鏈接，彈出一個div層，同時頁面的其他部分變灰并且不能點擊；無論是改變瀏覽器窗口大小還是下拉滾動條，這個彈出層都能始終保持居中；點擊頁面的關閉按鈕，彈出層消失，頁面恢復原樣。
點擊查看效果>>>
這里借鑒之前的一篇文章《基于jQuery的固定飄浮層》，使彈出窗口可以始終固定在瀏覽器的正中間。在這里有一個要點，就是如何使頁面的其他地方在彈出窗口的同時變灰。我使用的方法就是在點擊鏈接彈出div層的時候，給頁面增加一個div層，這個層就“負責”使頁面變灰。點擊關閉后，刪除這個層就能使頁面恢復原樣。不知道有沒有更好的方法，有的話請告訴我哦。
其他應該沒什么問題了，還是很簡單的，在這里順便貼上jquery代碼：
$(function(){var screenwidth,screenheight,mytop,getPosLeft,getPosTopscreenwidth = $(window).width();screenheight = $(window).height();//獲取滾動條距頂部的偏移mytop = $(document).scrollTop();//計算彈出層的leftgetPosLeft = screenwidth/2 - 260;//計算彈出層的topgetPosTop = screenheight/2 - 150;//css定位彈出層$("#box").css({"left":getPosLeft,"top":getPosTop});//當瀏覽器窗口大小改變時...$(window).resize(function(){screenwidth = $(window).width();screenheight = $(window).height();mytop = $(document).scrollTop();getPosLeft = screenwidth/2 - 260;getPosTop = screenheight/2 - 150;$("#box").css({"left":getPosLeft,"top":getPosTop+mytop});});//當拉動滾動條時...$(window).scroll(function(){screenwidth = $(window).width();screenheight = $(window).height();mytop = $(document).scrollTop();getPosLeft = screenwidth/2 - 260;getPosTop = screenheight/2 - 150;$("#box").css({"left":getPosLeft,"top":getPosTop+mytop});});//點擊鏈接彈出窗口$("#popup").click(function(){$("#box").fadeIn("fast");//獲取頁面文檔的高度var docheight = $(document).height();//追加一個層，使背景變灰$("body").append("<div id='greybackground'></div>");$("#greybackground").css({"opacity":"0.5","height":docheight});return false;});//點擊關閉按鈕$("#closeBtn").click(function() {$("#box").hide();//刪除變灰的層$("#greybackground").remove();return false;});});源代碼
<!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=utf-8" />
<title>jquery pop up</title>
<script src="jquery-ui-1.10.3/jquery-1.9.1.js" type="text/javascript"></script><style type="text/css"> ?* { margin:0; padding:0;? } #wrapper {? height:1000px;? } ?#box { ?display:none;? ?position:absolute; ?width:520px; ?height:300px; border:#f60 solid 2px; z-index:200; ?background:#fff; ?} ?#closeBtn {? position:absolute;? right:10px;? top:10px;? cursor:pointer;? } ?#greybackground { ?background:#000; ?display:block; ?z-index:100; ?width:100%; ?position:absolute; ?top:0; ?left:0; } ?</style>
</head><body><div id="wrapper"> <a href="http://www.netchina.com.cn" id="popup">點擊彈出div窗口</a> </div><div id="box"><span id="closeBtn">關閉</span></div><script type="text/javascript"> ?
$(function(){ ?var screenwidth,screenheight,mytop,getPosLeft,getPosTop;screenwidth = $(window).width(); ?screenheight = $(window).height(); ?mytop = $(document).scrollTop(); ?getPosLeft = screenwidth/2 - 260; ?getPosTop = screenheight/2 - 150; ?$("#box").css({"left":getPosLeft,"top":getPosTop}); $(window).resize(function(){ ?screenwidth = $(window).width(); ?screenheight = $(window).height(); ?mytop = $(document).scrollTop(); ?getPosLeft = screenwidth/2 - 260; ?getPosTop = screenheight/2 - 150; ?$("#box").css({"left":getPosLeft,"top":getPosTop+mytop}); ?}); ?$(window).scroll(function(){ ?screenwidth = $(window).width(); ?screenheight = $(window).height(); ?mytop = $(document).scrollTop(); ?getPosLeft = screenwidth/2 - 260; ?getPosTop = screenheight/2 - 150; ?$("#box").css({"left":getPosLeft,"top":getPosTop+mytop}); ?}); ?$("#popup").click(function(){ ?$("#box").fadeIn("fast"); ?$("body").append("<div id='greybackground'></div>"); ?var documentheight = $(document).height(); ?$("#greybackground").css({"opacity":"0.5","height":documentheight}); ?return false; ?}); ?$("#closeBtn").click(function() { $("#box").hide(); ?$("#greybackground").remove(); ?return false; ?}); ?}); ?</script></body>
</html>JavaScript實現彈出窗口實質上就是在瀏覽器上畫了一個方形區域，并在開始時將其隱藏，只是到某個JavaScript事件時才通過修改css的屬性值來將其顯示出來。
其大致步驟為：
創建一個裝載彈出窗口的div
<html>? ?
<head>? ?
<title>jQuery實例1：浮動窗口</title>? ?
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">? ?
<style type="text/css">
#win{?? ?
/*邊框*/? ?
border:1px red solid;?? ?
/*窗口的高度和寬度*/? ?
width : 300px;?? ?
height: 200px;?? ?
/*窗口的位置*/? ?
position : absolute;?? ?
top : 100px;?? ?
left: 350px;?? ?
/*開始時窗口不可見*/? ?
display : none;?? ?
}?? ?
/*控制背景色的樣式*/? ?
#title{?? ?
background-color : blue;?? ?
color : red;?? ?
/*控制標題欄的左內邊距*/? ?
padding-left: 3px;?? ?
}?? ?
#cotent{?? ?
padding-left : 3px;?? ?
padding-top :? 5px;?? ?
}?? ?
/*控制關閉按鈕的位置*/? ?
#close{?? ?
margin-left: 188px;?? ?
/*當鼠標移動到X上時，出現小手的效果*/? ?
cursor: pointer;?? ?
}? ?
#win{ ?
/*邊框*/ ?
border:1px red solid; ?
/*窗口的高度和寬度*/ ?
width : 300px; ?
height: 200px; ?
/*窗口的位置*/ ?
position : absolute; ?
top : 100px; ?
left: 350px; ?
/*開始時窗口不可見*/ ?
display : none; ?
} ?
/*控制背景色的樣式*/ ?
#title{ ?
background-color : blue; ?
color : red; ?
/*控制標題欄的左內邊距*/ ?
padding-left: 3px; ?
} ?
#cotent{ ?
padding-left : 3px; ?
padding-top :? 5px; ?
} ?
/*控制關閉按鈕的位置*/ ?
#close{ ?
margin-left: 188px; ?
/*當鼠標移動到X上時，出現小手的效果*/ ?
cursor: pointer; ?
}? ?
</style>
<script type="text/javascript" src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showWin(){?? ?
/*找到div節點并返回*/? ?
var winNode = $("#win");?? ?
//方法一：利用js修改css的值，實現顯示效果?? ?
// winNode.css("display", "block");?? ?
//方法二：利用jquery的show方法，實現顯示效果?? ?
// winNode.show("slow");?? ?
//方法三：利用jquery的fadeIn方法實現淡入?? ?
winNode.fadeIn("slow");?? ?
}?? ?
function hide(){
var winNode = $("#win");?? ?
//方法一：修改css的值?? ?
//winNode.css("display", "none");?? ?
//方法二：jquery的fadeOut方式?? ?
winNode.fadeOut("slow");?? ?
//方法三：jquery的hide方法?? ?
winNode.hide("slow");?? ?
} ?
</script>
</head>? ?
<body>? ?
</body>? ?
<a onClick="showWin()" href="#" mce_href="#">彈出窗口</a>? ?
<div id="win">? ?
<div id="title">我是標題欄！<span id="close" onClick="hide()">X</span></div>? ?
<div id="content">我是一個窗口！</div>? ?
</div>? ?
</html>
![query string parameters什么意思_public static void main(String[] args) 是什么意思？（轉）...](http://pic.xiahunao.cn/query string parameters什么意思_public static void main(String[] args) 是什么意思？（轉）...)
