2

simplemodal を使用して、コンテンツを含むモーダルを表示しています。

そのコンテンツ内で、元のコンテンツとはサイズが異なる (かなり小さい) 他のコンテンツへの ajax 呼び出しを行っています。

私がやっていることは、jQueryを使用してモーダルコンテナのサイズを変更することです。

私のajax呼び出しのoncompleteセクションで、次のjqueryを使用します

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

これには2つの問題があります。

異なるブラウザーでは幅がわずかに異なるため、モーダル コンテンツが正しく表示されません。

モーダルは元の位置を維持します。ブラウザ ウィンドウで再センタリングされません。

オープンモーダル内の新しいコンテンツに基づいてシンプルモーダルのサイズを変更する方法を知っている人はいますか?

どうもありがとう。

4

3 に答える 3

3

私のSimpleModal Auto Width/Heightと中央揃えのモーダルコード:

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

于 2013-01-07T09:37:21.193 に答える
0

これが私がこれまでに持っているものです

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");

それは一種の機能ですが、ウィンドウサイズに基づいて左と上がどれだけ移動する必要があるかを計算したいと思います。

それは機能しますが、それが解決策であるかどうかはわかりません。

于 2010-06-30T18:22:49.380 に答える
0

次のような例がうまくいくはずです。

$('#modalContentTest').modal({onShow: function (dialog) {
    var sm = this;
    dialog.container.animate({height: 550, width: 493}, 500, function () {
        sm.setPosition();   
    });
}});
于 2010-06-28T22:52:02.200 に答える