Question

我是jQuery的新手，请原谅我，如果我在任何地方都错了。

我有一个要求，即有多个可点击的框，只要你点击任何一个框就会打开，就像弹出一样，但是这样看起来它会从那个特定的点击框中出来，如果您将关闭打开的弹出窗口，它将缩小到单击的框（看起来像是在单击的框内）

Answer 1

对于jQuery新手来说这是一个复杂的问题，但这是一个解决方案。

警告：匆匆忙忙，暂时没有时间来计算正确的坐标以定位弹出框死屏的中心位置 - 这个例子让盒子的左上角落死了屏幕中心。我留给你制作坐标，把盒子的中心放在屏幕的中心 - 如果你要留下评论链接到修改后的jsFiddle，我将不胜感激溶液

jsFiddle Demo

＆＃13;

 var xx, yy, mPos = { x: -1, y: -1 }; //mouse position
$(document).mousemove(function(event) {
	mPos.x = event.pageX;
	mPos.y = event.pageY;
});

$('.dd').click(function(){
	xx = mPos.x;
	yy = mPos.y;
	$('#msg').css({top:mPos.y+'px',left:mPos.x+'px'}).animate({
		height: '400px',
		width: '500px',
		left: $(window).width() / 2,
		top: $(window).height() / 2
	},500,function(){
		//use a callback to show overlay ONLY when animation finished
		$('#overlay').show(); 
	});
});
$('#msg').click(function(){
	$('#overlay').hide();
	$('#msg').animate({
		height: '0px',
		width: '0px',
		left: xx+'px',
		top: yy+'px'
	},500);
});

＆＃13;

#overlay{position:absolute;top:0;left:0;height:100%;width:100%;background:black;opacity:0.7;z-index:1;display:none;}
#msg{position:absolute;height:0;left:0;background:wheat;overflow:hidden;z-index:2;}

.dd{height:30px;width:100px;margin:30px;padding-top:25px;border:1px solid orange;}
.clickable{cursor:pointer;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="overlay"></div>
<div id="msg">Click on me to minimize again</div>

<div id="d1" class="dd clickable">Div One</div>
<div id="d2" class="dd clickable">Div Two</div>
<div id="d3" class="dd clickable">Div Three</div>
<div id="d4" class="dd clickable">Div Four</div>

＆＃13;

从单击的div的中心将弹出窗口缩放到中心屏幕

1 个答案: