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>