我写的jquery弹出插件如何改进成可移动的，弹出层的移动时透明度为50%。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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弹出层实例</title>

<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(function()
{
$("#btnShow").click(function()
{

var yscroll=document.documentElement.scrollTop;
$(".DialogDiv").css("top","100px");
$(".DialogDiv").css("display","block");
document.documentElement.scrollTop=0;
});
$("#btnClose").click(function()
{

$(".DialogDiv").css("display","none");
});
});
</script>
<style type="text/css">
.MydialogTips{margin:0 ; padding:0;}

.DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
.DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
.DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
.DialogDiv .form{padding:10px;}
.DialogDiv {padding:3px 5px;font-size:12px;overflow-y:auto;
border:1px solid #d0d0d0;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
</style>
</head>

<body >

<div class="DialogDiv" style="display:none">
<h2 class="MydialogTips">弹出层<a href="#" id="btnClose">关闭</a></h2>
<div class="form">
我是弹出对话框！！
<table>
<tr>
<td>1</td>
<td>haha</td>
</tr>
<tr>
<td>2</td>
<td>haha</td>
</tr>
</table>
</div>
</div>

<p> </p>
<p align="center">
<input value="弹出" class="but" type="button" id="btnShow" />
</p>
</body>
</html> 展开

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

xiaohui056200
2012-02-02 · 超过33用户采纳过TA的回答

知道答主

回答量：70

采纳率：0%

帮助的人：63.4万

我也去答题访问个人页

关注

展开全部

<!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弹出层实例</title>

<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(function()
{
   $("#btnShow").click(function()
   {     
      var yscroll=document.documentElement.scrollTop;
      $(".DialogDiv").css("top","100px");
      $(".DialogDiv").css("display","block");
      document.documentElement.scrollTop=0;
	  movediv();
   });
   $("#btnClose").click(function()
   {  
      $(".DialogDiv").css("display","none");
   });
});

function movediv(){
	var obj=this;
	this.idORclass1=".DialogDiv";
	this.idORclass2=".DialogDiv";
	this.deltaX=0;
	this.deltaY=0;
	function dragStart(dragEvent){

		obj.deltaX=dragEvent.clientX-$(obj.idORclass2).offset().left;
		obj.deltaY=dragEvent.clientY-$(obj.idORclass2).offset().top;
		$(document).bind("mousemove",dragMove);  
		$(document).bind("mouseup",dragStop);
		dragEvent.preventDefault();
	}
	function dragMove(dragEvent){
		$(obj.idORclass2).css({
		 "opacity": "0.5", 
		 "filter":"Alpha(Opacity=50)",
		 "left":(dragEvent.clientX-obj.deltaX)+"px",
		 "top" :(dragEvent.clientY-obj.deltaY)+"px"
		})
		dragEvent.preventDefault();
	}
	function dragStop(){		
		$(obj.idORclass2).css({
			"opacity": "1", 
			"filter":"Alpha(Opacity=100)"
		})
		$(document).unbind("mousemove",dragMove);
		$(document).unbind("mouseup",dragStop);
	}
	$(document).ready(function(){
	      $(obj.idORclass1).bind("mousedown",dragStart);
	})
}
</script>
<style type="text/css">
.MydialogTips{margin:0 ; padding:0;}

.DialogDiv{position:absolute;width:400px; height:auto; z-index:9999;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;
background-color:green;
}
.DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
.DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
.DialogDiv .form{padding:10px;filter:alpha(opacity=80);-moz-opacity:0.8;}

</style>
</head>

<body >

<div class="DialogDiv" style="display:none">
<h2 class="MydialogTips">弹出层<a href="#" id="btnClose">关闭</a></h2>
    <div class="form">
    我是弹出对话框！！
    <table>
    	<tr>
    	<td>1</td>
    	<td>haha</td>
    		</tr>
    		<tr>
    		<td>2</td>
    	<td>haha</td>
    	</tr>
    	</table>
    </div>
</div>

<p> </p>
<p align="center">
  <input value="弹出" class="but" type="button" id="btnShow" />
</p>
</body>
</html>

直接复制用就行 打开看看  IE8和firefox都没有问题  希望这是楼主想要的效果


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

我写的jquery弹出插件如何改进 成可移动的，弹出层的移动时透明度为50%。

其他类似问题

为你推荐：

我写的jquery弹出插件如何改进成可移动的，弹出层的移动时透明度为50%。