當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

用jQuery实现弹出窗口/弹出div层

發(fā)布時間：2023/12/9 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了用jQuery实现弹出窗口/弹出div层小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

原文鏈接：http://hi.baidu.com/awz_tiger/item/863cfc10c4bb0f6171d5e8d9

http://blog.163.com/qiuxinke2006@126/blog/static/24885580201131763139536/

http://hi.baidu.com/kilwin/blog/item/f4cfaf2695375920c9955947.html

　用div層代替?zhèn)鹘y(tǒng)的彈出窗口已經(jīng)變得很普遍了，因為div層是網(wǎng)頁的一部分，不會像傳統(tǒng)的彈出窗口那樣容易被瀏覽器攔截。我們常見的彈出div層就是在頁面加載后或者點擊頁面的某個鏈接時彈出一個div層，同時頁面的其他地方會變灰。那么今天我就試著用jquery來實現(xiàn)這個效果。

　　通過今天的jquery實例學習，我們要達到這樣的效果：點擊頁面的鏈接，彈出一個div層，同時頁面的其他部分變灰并且不能點擊；無論是改變?yōu)g覽器窗口大小還是下拉滾動條，這個彈出層都能始終保持居中；點擊頁面的關閉按鈕，彈出層消失，頁面恢復原樣。

　　點擊查看效果>>>

　　這里借鑒之前的一篇文章《基于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實現(xiàn)彈出窗口實質(zhì)上就是在瀏覽器上畫了一個方形區(qū)域，并在開始時將其隱藏，只是到某個JavaScript事件時才通過修改css的屬性值來將其顯示出來。

其大致步驟為：

創(chuàng)建一個裝載彈出窗口的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;?? ?/*控制標題欄的左內(nèi)邊距*/? ?padding-left: 3px;?? ?}?? ?#cotent{?? ?padding-left : 3px;?? ?padding-top :? 5px;?? ?}?? ?/*控制關閉按鈕的位置*/? ?#close{?? ?margin-left: 188px;?? ?/*當鼠標移動到X上時，出現(xiàn)小手的效果*/? ?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; ?/*控制標題欄的左內(nèi)邊距*/ ?padding-left: 3px; ?} ?#cotent{ ?padding-left : 3px; ?padding-top :? 5px; ?} ?/*控制關閉按鈕的位置*/ ?#close{ ?margin-left: 188px; ?/*當鼠標移動到X上時，出現(xiàn)小手的效果*/ ?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節(jié)點并返回*/? ?var winNode = $("#win");?? ?//方法一：利用js修改css的值，實現(xiàn)顯示效果?? ?// winNode.css("display", "block");?? ?//方法二：利用jquery的show方法，實現(xiàn)顯示效果?? ?// winNode.show("slow");?? ?//方法三：利用jquery的fadeIn方法實現(xiàn)淡入?? ?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>

總結(jié)

以上是生活随笔為你收集整理的用jQuery实现弹出窗口/弹出div层的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：怎样把图片转换成线条图？
下一篇： java 操作窗口_java selen