juery框架寫(xiě)的彈窗效果適合新手
更新時(shí)間：2013年11月27日 17:33:06 作者：
彈窗效果想必大家都有見(jiàn)到過(guò)吧，在本文將為大家介紹下使用juery框架來(lái)寫(xiě)個(gè)適合新手學(xué)習(xí)的彈窗效果
本人新手寫(xiě)點(diǎn)代碼有點(diǎn)村，希望大家多多包含?。。。。?！
<html>
<head>
<title>js彈窗效果</title>
<meta http-equiv="content-type" content="text/html charset=gb2312">
<script language="javascript" src="jquery-1.4.js"></script>
</head>
<script language="javascript">
//document.body.offsetWidth="512px";
function mina(){
$("#dv").css("display","block");
var a = $(document).height();
var b = $(window).width();
var h =$(window).height();
f = (b-300)/2;
d =(h-300)/2;
$("#dv").css("margin-top",d);
$("#dv").css("margin-left",f);
$("#zhezhao").toggle();
$("#zhezhao").css("width",b);
$("#zhezhao").css("height",a);
}
function nin(){
$("#dv").css("display","none");
$("#zhezhao").toggle();
}
</script>
<body>
<div style="display:none;position:absolute;z-index:100;background:#ccc" id="zhezhao"></div>
<input type="button" value="點(diǎn)擊" onclick="mina()">
<div id="dv" style="width:300px;height:300px;border:1px solid red;display:none;position:absolute;z-index:1000;background:white;">
<div><span id="ss"style="width:30px;height:30px;border:1px solid blue;background:black;float:right;" onclick="nin()"></span></div>
</div>
<table align="center" border="1" width="888" height="668">
<tr>
<td align="center">haha</td>
</tr>
</table>
</body>
</html>
如果對(duì)你有幫助也算沒(méi)有白白上傳?。。。。。。ㄐ枰私鈐query框架）
復(fù)制代碼 代碼如下:
<html>
<head>
<title>js彈窗效果</title>
<meta http-equiv="content-type" content="text/html charset=gb2312">
<script language="javascript" src="jquery-1.4.js"></script>
</head>
<script language="javascript">
//document.body.offsetWidth="512px";
function mina(){
$("#dv").css("display","block");
var a = $(document).height();
var b = $(window).width();
var h =$(window).height();
f = (b-300)/2;
d =(h-300)/2;
$("#dv").css("margin-top",d);
$("#dv").css("margin-left",f);
$("#zhezhao").toggle();
$("#zhezhao").css("width",b);
$("#zhezhao").css("height",a);
}
function nin(){
$("#dv").css("display","none");
$("#zhezhao").toggle();
}
</script>
<body>
<div style="display:none;position:absolute;z-index:100;background:#ccc" id="zhezhao"></div>
<input type="button" value="點(diǎn)擊" onclick="mina()">
<div id="dv" style="width:300px;height:300px;border:1px solid red;display:none;position:absolute;z-index:1000;background:white;">
<div><span id="ss"style="width:30px;height:30px;border:1px solid blue;background:black;float:right;" onclick="nin()"></span></div>
</div>
<table align="center" border="1" width="888" height="668">
<tr>
<td align="center">haha</td>
</tr>
</table>
</body>
</html>
如果對(duì)你有幫助也算沒(méi)有白白上傳?。。。。。。ㄐ枰私鈐query框架）
相關(guān)文章
這篇文章主要介紹了jQuery中each()方法用法,以實(shí)例形式詳細(xì)分析了each()方法的功能、定義及使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法,涉及針對(duì)表單提交時(shí)的判斷方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
jQuery 選擇器用法實(shí)例分析【prev + next】
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實(shí)例形式分析了jQuery選擇器prev 與 next基本功能、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
jquery 屏蔽一個(gè)區(qū)域內(nèi)的所有元素，禁止輸入
有時(shí)候，需要屏蔽一個(gè)div中所有的input類型，使用jquery很簡(jiǎn)單有效的完成。2009-10-10
使用JQuery實(shí)現(xiàn)圖片輪播效果的實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇使用JQuery實(shí)現(xiàn)圖片輪播效果的實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery焦點(diǎn)圖左右轉(zhuǎn)換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)購(gòu)物車出現(xiàn)下拉框代碼(推薦)
在做web前端項(xiàng)目開(kāi)發(fā)的時(shí)候，使用jquery庫(kù)的感觸頗多，下面小編通過(guò)寫(xiě)購(gòu)物車的下拉框做法，把我的想法給大家分享一下，感興趣的朋友可以參考下2016-07-07
這篇文章主要介紹了jQuery中DOM操作方法,實(shí)例分析了dom對(duì)象的創(chuàng)建、屬性的修改、樣式的修改、動(dòng)態(tài)綁定事件等技巧,需要的朋友可以參考下2015-01-01
jQuery+Ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)
這篇文章主要介紹了jQuery+Ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)，本文使用的生成分頁(yè)的工具條是jquery.pagination.js，感興趣的小伙伴們可以參考一下2015-10-10![[jQuery] 事件和動(dòng)畫(huà)詳解](http://img.jbzj.com/images/xgimg/bcimg9.png)
這篇文章主要介紹了JQ事件和動(dòng)畫(huà)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03