Автоматическое изменение ширины и высоты с помощью диалогового окна jQuery - PullRequest
Новая
       15

Автоматическое изменение ширины и высоты с помощью диалогового окна jQuery

7 голосов
/ 15 января 2012

Я использую диалоговое окно jQuery UI для загрузки содержимого ajax.Он правильно позиционирует диалог по вертикали, однако, с параметром width: "auto" он не центрирует его по горизонтали.Он не по центру, как 100px справа от центра.

Вот мой код: 

$('.open').live('click', function(e) {
    e.preventDefault();
    $("#modal").load($(this).attr('href')).dialog({
        title: $(this).attr('title'),
        modal: true,
        autoOpen: true,
        draggable: false,
        resizable: false,
        width: 'auto',
        position: ['center', 'top']
    });
});

Есть идеи, если есть способ, чтобы он автоматически изменял размер и оставался в центре?1007 *

РЕДАКТИРОВАТЬ: Это работает: 

$("#modal").load($(this).attr('href'), function() {
    $("#modal").dialog({
        title: $(this).attr('title'),
        width: 'auto',
        modal: true,
        autoOpen: true,
        draggable: false,
        resizable: false,
        position: ['center', 150],
        create: function(event, ui) {}
    });
});

Ответы [ 2 ]

3 голосов
/ 05 мая 2015

Чтобы избежать проблем с позиционированием, следует дождаться загрузки содержимого, прежде чем создавать или открывать диалоговое окно.В противном случае:

  1. Диалоговое окно jQuery UI вычислит ширину и центр пусто div
  2. Когда загружается контент, правая часть диалога растягивается, чтобы вместитьсодержимое, в то время как левая сторона остается фиксированной, в результате чего диалоговое окно кажется смещенным вправо

Ваш пример кода должен быть изменен на: 

$("#modal").load("/ajax/content.html", function() {
  // callback is executed after post-processing and HTML insertion has been performed
  // this refers to the element on which load method was called
  $(this).dialog({
    modal: true,
    autoOpen: true,
    draggable: false,
    resizable: false,
    width: "auto",
    position: { my: "top", at: "top", of: window }
  });
});
0 голосов
/ 31 марта 2015

Попробуйте этот код. Это работает для меня и кросс-браузер. 

$(window).resize(function(){
        $('.className').css({position:'absolute', left:($(window).width() 
        - $('.className').outerWidth())/2,
        top: ($(window).height() 
        - $('.className').outerHeight())/2
        });
});

// To initially run the function:
$(window).resize();

Создание диалога должно быть довольно простым.

...