WedX - журнал о программировании и компьютерных науках

Проблема с высотой и шириной диалогового окна jquery

изначально я показываю диалог jquery с фиксированной высотой и шириной в центре страницы. теперь я хочу поместить в диалоговое окно div с большим количеством html-контента. теперь я хочу динамически увеличивать высоту и ширину диалогового окна в соответствии с высотой и шириной div с помощью функции анимации, но я хочу, чтобы диалоговое окно оставалось в центре страницы.

когда диалоговое окно открывается в первый раз в центре страницы, а затем, если я изменяю высоту и ширину, диалоговое окно не находится в центре страницы. так что помогите мне с концепцией того, как заставить диалоговое окно вставляться в центр страницы, когда высота и ширина будут увеличиваться с помощью функции анимации.

таким образом я работаю с диалогом... вот мой небольшой код

 $(document).ready(function () {

         $("#dialog").dialog({
             autoOpen: false,
             bgiframe: true,
             height: 85,
             width: 330,
             modal: false,
             draggable: true,
             resizable: false,
             position: 'center',
             show: {
                 effect: "fade",
                 duration: 1000
             },
             hide: {
                 effect: "fade",
                 duration: 500
             },
             open: function (type, data) {
                 $(this).parent().appendTo("form");
             }
         });
         });

если возможно, то, пожалуйста, покажите мне трюк с примером кода. Благодарность

jquery jquery-ui
30.04.2012

Ответы:


1

Хорошо, будет ли это работать, ничего не предполагая о том, как изменяется размер элемента?

$(#dialog).resize(function(){
    var $host = $("#idOfParent");
    var hostHeight = $host.Height();
    var hostWidth = $host.Width();
    // center dialog on screen
    this.left = (hostWidth - this.width) / 2
    this.top= (hostHeight - this.height) / 2
});

https://api.jquery.com/resize/

30.04.2012

2

Вы можете попробовать это: DEMO

Это автоматически увеличивает высоту диалога динамически

HTML:

<div id="dialog">
    <div id="body">I'm a dialog</div>
</div>

Скрипт:

<script>
     $('#dialog').dialog(
      "resize", "auto"
     );
     $('#dialog').dialog();
     setTimeout(function() {
        $('#body').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
</script>
30.04.2012

3

Вместо того, чтобы помещать наблюдатели javascript в div, вы можете просто использовать опцию «minHeight» для диалога.

https://jqueryui.com/demos/dialog/ -> Параметры

Это делает ваш код примерно таким:

 $("#dialog").dialog({
         autoOpen: false,
         bgiframe: true,
         minHeight: 85,
         width: 330,
         modal: false,
         draggable: true,
         resizable: false,
         position: 'center',
         show: {
             effect: "fade",
             duration: 1000
         },
         hide: {
             effect: "fade",
             duration: 500
         },
         open: function (type, data) {
             $(this).parent().appendTo("form");
         }
     });
01.05.2012
  • Я ставил px в конце числа, не так ли? 24.09.2014
    • Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]