эффект масштабирования диалога jquery - PullRequest
Новая
       21

эффект масштабирования диалога jquery

3 голосов
/ 05 февраля 2011

возможно ли воссоздать эффект увеличения масштаба для диалогов в 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;
        });
 });

[div id = "testdialog"] некоторый контент здесь [/ div]

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

1 Ответ

2 голосов
/ 05 февраля 2011

См. Пример следующего здесь.

Один из способов сделать это - выполнить желаемый переход, а затем открыть диалоговое окно в функции обратного вызова в конце анимации. Итак, допустим, у вас есть неупорядоченный список миниатюр одинакового размера, вы можете сделать 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>
...