对话框缩放效果jQuery

Question

是否可以在不需要下载轻量级插件的情况下，使用jQuery重新创建类似于缩放效果的对话框？

我想为我的对话框添加动画效果，以模拟点击页面上的一个图像时所发现的“缩放”效果（此页面）。

在不需要另一个插件的情况下，这是否可以通过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;
        });
 });

这里有一些内容

- Michael

---

JavaScript可以做到，jQuery也可以做到，这就是插件的作用。如果有人为您开发了这个答案，使用插件会更有效率。像这样的高级功能并不包含在jQuery核心中，这就是插件存在的原因。 - Josiah Ruddell

一个插件来启用指定对话框的开始和结束点似乎是不必要的...我错了吗？jquery.animate或jquery.position是可能的选择吗？ - Michael

嗯...很明显，你有选择。 下载一个插件，或者自己编写。jQuery的animate()函数会对你有所帮助。或者你可以在问题中提供足够的细节，以便我们真正地帮助你。例如，我们需要看到你正在使用的实际HTML、CSS和JavaScript。 - Mark Eirich

当然。代码已添加。只是一个简单的场景...也许我没有问对问题。是否可能为对话框添加效果，使其看起来像是从实际被点击的元素中打开？比如缩放效果...类似于灯箱示例。我是否天真地认为可以通过某种方式轻松地指定对话框的效果和位置来实现？ - Michael

或者是添加到叠加层中的效果？显然我不知道如何做...不想要施舍，欢迎指导我走正确的方向。任何帮助都将不胜感激。 - Michael

Answer 1

点击此处可查看以下示例。

您可以通过执行所需的转换，然后在动画结束的回调函数中打开对话框来实现这一点。假设您有一个等大小缩略图的无序列表，您可以制作一个白色的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>

- mVChr

---

非常感谢。我稍微修改了一下你的代码，但它几乎完全符合我的要求。感谢你花费的时间。http://jsfiddle.net/HDmff/50/ - Michael