從單擊的div中心將彈出窗口縮放到中心屏幕

Question

我是jQuery和其他所有人的新手，請原諒我是否在任何地方出錯。

我的要求是，有多個可單擊的框，一旦您單擊任何框，它就會像彈出窗口一樣打開，但是以這種方式看起來好像是從該特定的單擊框中出來的，如果您將關閉打開的彈出窗口，它將縮小到被單擊的框（看起來像在被單擊的框內）

Answer 1

對於jQuery新手來說，這是一個復雜的問題，但這是一個解決方案。

注意：匆忙而又沒有時間來計算正確的坐標，以將彈出框的死點定位在屏幕上- 此示例將上/左角放在屏幕的死點上。 我將其留給您算出將框的中心置於屏幕中心的坐標- 如果您在解決方案中留下評論並鏈接到修訂的jsFiddle，將不勝感激。

jsFiddle演示

  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); }); 

 #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;} 

 <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>