javascript - 如何进行缩放以适合我的情况？

Question

我正在尝试创建一个功能，当用户点击一个图像时，一个 div 将弹出并根据图像的大小进行动画处理以适合整个浏览器窗口。

会是这样的

 -----------------
|                 |
|      img1       |
|          img2   |
 -----------------

点击ima2后

 -----------------
|                 |
| image2 contents |
|                 |
 -----------------

当 img2 被点击时，包含内容的 div 将弹出并动画以适应整个浏览器可视屏幕。我正在考虑使用 css transform 来执行此操作，但我不确定如何开始以及如何锁定图像内容位置。谁能给我一些提示？非常感谢!

Answer 1

你的意思是这样的FIDDLE ？

JS

var $dialogpopup = $( ".hiddenimagediv" ).dialog({
                  autoOpen: false,
                  height: 'auto',
                  width: 'auto',
                  position: {my: "top middle",
                             at: "top middle",
                             of: ".imagediv"},
                  title:"Your Picture"});

$('.imagediv').click(function(){
                               $dialogpopup.dialog('open');
                               });

您可以删除上栏、调整格式等。