dialog zoom effect jquery

Question

is it possible to re-create a zoom-like effect for dialogs in jquery without needing to download a lightbox plugin?

i'd like to add animation to my dialogs to simulate the "zoom" effect found on this page when you click on one of the images.

without needing yet another plugin, can this be done with jQuery out of the box? would love to be able to have dialogs (modal) animate from a specific point on the screen which the user has clicked (say a button or link) into a bigger container with the appropriate content - a zoom overlay effect?

any help is greatly appreciated...

Edited:

 $(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"] some content here [/div]

[input type="button" id="opener" /]

Answer 1

See example of the following here.

One way you can accomplish this is to perform the transition you desire and then open the dialog in the callback function at the end of the animation. So, let's say you have an unordered list of equal sized thumbnails, you can make a div that's a white box and use jQuery to position it over whichever thumbnail you click. You'd then begin an animation towards the center of the viewport, and perhaps resize the div, and then in the callback at the end of this animation you can launch the dialog pro grammatically. I'm not too familiar with jQuery UI dialog, so you'll have to read the API docs for how to do this.

$('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>