juery框架寫的彈窗效果適合新手
更新時間：2013年11月27日 17:33:06 作者：
彈窗效果想必大家都有見到過吧，在本文將為大家介紹下使用juery框架來寫個適合新手學習的彈窗效果
本人新手寫點代碼有點村，希望大家多多包含！?。。。?！
<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="點擊" 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>
如果對你有幫助也算沒有白白上傳?。。。。。。ㄐ枰私鈐query框架）
復制代碼 代碼如下:
<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="點擊" 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>
如果對你有幫助也算沒有白白上傳?。。。。。。ㄐ枰私鈐query框架）
相關文章
這篇文章主要介紹了jquery處理頁面彈出層查詢數據等待操作,實例分析了jquery實現等待效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
本章節(jié)主要介紹了jQuery在HTML中動態(tài)插入節(jié)點的各種方法,制作成表格，方便大家對比學習，需要的朋友可以參考下2015-03-03
這篇文章主要介紹JQuery實現彈出炫麗對話框的同時讓背景變灰色效果,需要的朋友可以參考下2014-05-05
jQuery實現點擊按鈕文字變成input框點擊保存變成文字
這篇文章主要介紹了jQuery實現點擊按鈕文字變成input框點擊保存變成文字的相關資料，非常具有參考借鑒價值,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery中index()的用法分析,針對API示例進行分析,給出了改進方法的實例,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了使用jQuery調用XML實現無刷新即時聊天的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jquery 插件重新綁定的處理方法,結合實例形式分析了jQuery插件解除綁定與重新綁定的具體操作技巧,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了jQuery菜單插件用法,以一個實例形式較為詳細的分析了jquery菜單插件的完整使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了jquery 表單 多選框的一種巧妙寫法 ,需要的朋友可以參考下2015-09-09
jquery+ajaxform+springboot控件實現數據更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實現數據更新操作,使用jquery的ajaxform插件是一個比較不錯的選擇。具體實現工程大家參考下本文2018-01-01