对话框缩放效果jquery

Question

是否可以在jquery中为对话框重新创建类似缩放的效果而无需下载灯箱插件？

我想在我的对话框中添加动画，以便在您点击其中一张图片时模拟on this page找到的“缩放”效果。

不需要另外一个插件，这可以用jQuery开箱即用吗？我希望能够从屏幕上的特定点（用按钮或链接）将对话框（模态）设置为具有适当内容的更大容器 - 缩放叠加效果？

非常感谢任何帮助...

编辑：

 $(function() {
        $("#testdialog").dialog({
            autoOpen: false,
            minWidth: 425,
            minHeight: 300,
            position: ['center', 115],
            resizable: false,
            modal: true
        });
         $("#opener").click(function () {
            $("#testdialog").dialog("open").position();
            return false;
        });
 });

[div id =“testdialog”]这里的一些内容[/ div]

[input type =“button”id =“opener”/]

Answer 1

See example of the following here.

您可以实现此目的的一种方法是执行所需的转换，然后在动画结束时在回调函数中打开对话框。所以，假设您有一个等大小缩略图的无序列表，您可以创建一个div白色框，并使用jQuery将其定位在您单击的缩略图上。然后，您将开始朝向视口中心的动画，并可能调整div的大小，然后在此动画结束时的回调中，您可以以编程方式启动对话框。我不太熟悉jQuery UI对话框，因此您必须阅读API文档以了解如何执行此操作。

$('ul li').click(function(e) {
  var $t = $('#transition'),
    to = $(this).offset(),
    td = $(document);

  $t.children('div').css({
    width: 100,
    height: 100
  });
  $t.css({
    top: to.top + 50,
    left: to.left + 50,
    display: 'block'
  }).animate({
    top: td.height() / 2,
    left: td.width() / 2
  }, 600, function() {
    $(this).animate({
      top: '-=75',
      left: '-=50'
    }, 600);
    $(this).children('div').animate({
      width: 250,
      height: 200
    }, 600, function() {
      // open dialog here
    });
  });
});

$('#transition').click(function(e) {
  $(this).hide();
});

body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; }

ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; }

#transition {
    background:transparent;
    display:none;
    position:absolute; top:50%; left:50%; z-index:50;
}
#transition > div {
    background:#fff;
    border:1px solid #666;
    margin:-50px 0 0 -50px;
    width:100px; height:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
</ul>
<div id="transition">
  <div>zoom effect
    <div></div>