простое модальное изменение размера и центрирование? - PullRequest
Новая
       15

простое модальное изменение размера и центрирование?

2 голосов
/ 28 июня 2010

Я использую simplemodal, чтобы вызвать модал с некоторым содержанием.

Внутри этого контента я делаю ajax-вызов некоторому другому контенту, который отличается от исходного контента (немного меньше)

Что я делаю, так это то, что я использую jQuery для изменения размера модального контейнера.

в незавершенном разделе моего вызова ajax я использую следующий jquery 

jQuery("#simplemodal-container").animate({ height: 550 }, 500);
jQuery("#simplemodal-container").animate({ width: 493}, 500);'

есть две проблемы с этим.

в разных браузерах ширина немного отличается, поэтому модальное содержимое выглядит не совсем правильно

и модал сохраняет свою исходную позицию. он не перезаписывается в окне браузера.

Кто-нибудь знает, как изменить размер SimpleMod на основе нового контента в открытом модале?

Большое спасибо.

Ответы [ 3 ]

3 голосов
/ 07 января 2013

Мой SimpleModal Авто Ширина / Высота и центрированный модальный код: 

$('#sampleDiv').modal({
onShow: function (dialog) {
            var h = $(window).height();
            var w = $(window).width();
            dialog.container.css('height', 'auto');
            dialog.container.css('width', 'auto');
            var h2 = dialog.container.height();
            var w2 = dialog.container.width();  
            var top = (h/2)-(h2/2)-h2;  
            var left = (w/2)-(w2/2)-w2;                                                         
            dialog.container.css('left', left+'px');
            dialog.container.css('top', top+'px');
    }
});

Работают IE, FireFox и Chrome.

0 голосов
/ 30 июня 2010

Вот что у меня есть

function modalThree ($ type) { var $ type; 

    jQuery("#simplemodal-container").animate({ width: 250 }, 0);
    jQuery("#simplemodal-container").animate({"left": "+=200px"}, "fast");
    jQuery("#simplemodal-container").animate({"top": "-=50px"}, "fast");


    jQuery('#simplemodal-container').css({
    position:'absolute',
    left: (jQuery(window).width() - jQuery('#simplemodal-container').outerWidth())/2,
    top: (jQuery(window).height() - jQuery('#simplemodal-container').outerHeight())/2
    });


    jQuery("#dialog").load("/default/modalTwo", function()
    {
      jQuery("#dialog").modal({
      overlay:80,
      autoResize:true,
      overlayCss: {backgroundColor:"#000"}
      });
    });
}

мой сайт имеет фиксированную ширину, и я знаю размер контента из вызова ajax.

я изменяю размер, используя следующее

jQuery ("# ​​simplemodal-container"). Animate ({ширина: 250}, 0); jQuery ("# ​​simplemodal-container"). animate ({"left": "+ = 200px"}, "fast"); jQuery ("# ​​simplemodal-container"). animate ({"top": "- = 50px"}, "fast");

это вроде работает, но я бы хотел посчитать, сколько левого и верхнего мест должно пройти на основе размера окна.

это работает, но я не уверен, что это решение.

0 голосов
/ 29 июня 2010

Пример, подобный следующему, должен работать для вас: 

$('#modalContentTest').modal({onShow: function (dialog) {
    var sm = this;
    dialog.container.animate({height: 550, width: 493}, 500, function () {
        sm.setPosition();   
    });
}});
...