juery框架写的弹窗效果适合新手

242 阅读 0 评论 160 点赞

我是靠谱客的博主健忘店员，最近开发中收集的这篇文章主要介绍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> 