jquery - jquery simplemodal動的高さ

Question

jquery で simplemodal ポップアップを使用しています。コンテンツに応じてポップアップの高さを動的に設定したいと考えています。現在、500 に固定されています。height プロパティを削除すると、最初は機能しますが、コンテンツが大きくなると、高さ自体が調整されません (ポップアップ内にタブがあり、各タブが異なるコンテンツを読み込みます)。 .

$("#popup").modal({
        containerCss: {
            width: 550,
            height: 500
        },

score 19 · Accepted Answer

onShowの最後の行にこの関数を追加することで、動的な高さ（chromeとffでのみテスト）を設定できます。

$('#simplemodal-container').css('height', 'auto');

これがお役に立てば幸いです。containerIdを指定する場合は、 「＃simplemodal-container」をcontainerIdに置き換える必要があります。

score 12 · Accepted Answer

ここでの解決策のいくつか、つまり高さを自動に設定することの難しさは、モーダルを現在のウィンドウサイズよりも小さく保つという simplemodal の優れた動作が失われることです (たとえば、maxHeight を 90% に設定することによって)。

私は次の解決策を思いつきました：

 $.modal.defaults.onShow = function(dialog) {
   if (!dialog) dialog = $.modal.impl.d
   dialog.container.css('height', 'auto');
   dialog.origHeight = 0;
   $.modal.setContainerDimensions();
   $.modal.setPosition();
  }

これの本質は、アクティブなモーダルで setContainerDimensions を実行すると、setContainerDimensions を明示的に呼び出しても、新しいコンテンツを取得しても再計算されないということです。ここで行うことは、記憶された高さを取得し、強制的に再計算することです。

もちろん、コンテンツを変更するたびに $.modal.defaults.onShow を呼び出す必要があります (ajax 呼び出し、タブ変更など) が、不要なスクロールバーを回避しながら、autoResize および autoPosition 機能を維持できます。

score 7 · Accepted Answer

この短いバージョンを取得するために、Sahat と Tommy の回答を組み合わせました。Firefox でテストしたところ、次のように動作します。

$.modal("<p>yourContent</p>", { onShow: function(dlg) {
    $(dlg.container).css('height','auto')
}});

score 5 · Accepted Answer

5

これをcssファイルに入れます：

.simplemodal-container
{
    height:auto !important;
}

于 2011-09-30T14:15:32.637 に答える

score 3 · Accepted Answer

SimpleModal には、コンテンツが変更されたときに高さ/幅を調整する機能が組み込まれていません。これは、追加する必要があるものです。

score 2 · Accepted Answer

これが私の解決策です：

var activeModal;
$.extend($.modal.defaults, {
    onShow: function(dialog) {
        activeModal = dialog;
        dialog.container.css('height', 'auto');
    }
});
function showModal() { // Creates a modal
    $.modal("#aModal");
}
...
function changeModalContent() { // A function that changes the modal content
    ...
    // After changing the content, do this:
    $.modal.update(activeModal.data.css('height'), 'auto');
}

FF、Chrome、Safari、Operaでテストしました。

それがあなたにもうまくいくことを願っています...

よろしく！

score 1 · Accepted Answer

これは、onShowイベントハンドラーに渡されるダイアログパラメーターをメモ化することで実現できました。その後、イベントによってコンテンツが変更された場合は、dialog.containerのcssheightプロパティを操作します。

<script type = "text / javascript">
var walkInDlg;
function doModal（）{//ページ上のボタンのonClickから呼び出されます
    jQuery.modal（ "＃aModal"、{height： "auto"、
        幅：500、
        backgroundColor： "＃807c68"、
        オーバーレイ：75、
        onShow：function（dlg）{walkInDlg = dlg}、
        onClose：function（dlg）{walkInDlg = undefined; jQuery.modal.close（）}、
        containerCss：{border： "0"、padding： "0"}
    }）
}
</ script>

..。

//ページの他の場所
//これはアクションのイベントハンドラーにあります
//ダイアログにコンテンツを追加します

..。
//コンテンツを追加した後、次のようにします。
jQuery（walkInDlg.container）.css（'height'、'auto'）

このテクニックがChromeとFirefoxで機能するのを目撃しました。

score 1 · Accepted Answer

高さを指定しないと、デフォルトで自動高さになります。ダイアログを破棄してすぐに再作成すると、自動高さは基本的にサイズを変更する必要があります。これは回避策ですが、適切な高さを手動で計算するよりもおそらく簡単です。ダイアログに自動サイズ変更オプションがあると便利ですが...

score 0 · Accepted Answer

これが私がすることです：

    $.extend($.modal.defaults, {
    closeClass: "close",
    closeHTML: "<a></a>",
    minWidth: 400,
    minHeight: 200,
    maxWidth: 780,
    maxHeight: 580,
    onShow: function (dialog) {
        dialog.container.css("height", "auto");
    }
});

score 0 · Accepted Answer

dmnc の回答に基づいて、コンテナの fadeIn のコールバックで onOpen 関数にコードを追加することで、これを機能させることができました。

コンテンツがレンダリングされると、位置が少しジャンプしますが、サイズが変更され、現在の位置に完全に合わせられます。

$('#target').modal({
    overlayClose: true,
    onOpen: function (dialog) {
        dialog.overlay.fadeIn('fast', function(){
            dialog.data.hide();
            dialog.container.fadeIn('fast', function(){
                dialog.data.fadeIn('fast');

                // where the magic happens
                dialog.container.css('height', 'auto');
                dialog.origHeight = 0;
                $.modal.setContainerDimensions();
                $.modal.setPosition();
            });
        });
    },
    onClose: function (dialog) { ... }
});

score 0 · Accepted Answer

.modal({
   autoResize:true,
   maxHeight: $(window).height(),                
   minHeight: $(window).height() - 100               
});

score 0 · Accepted Answer

Eric Martins Simple Modal の高さや幅を動的に調整する簡単な方法を次に示します。「.something」をクリックした後、モーダルを開くように呼び出しています。ウィンドウの高さ/幅を測定し、(px または div(高さ)) を減算します。次に、動的に作成された変数で幅/高さを設定します

    $('.something ').click(function() {
        //Dynamically Get Height/Width of the Window
        var wh = $(window).height() - 100 
        var ww = $(window).width() - 100 
           //Can subtract other divs heights if wanted
           //var dh = $('#exampleDiv').height();
           //dh = ( wh - dh );    
        $('#modalThis').modal({
            containerCss : {                
                height : wh,
           //or height : dh             
                width : ww

            },
        });
    });

score 0 · Accepted Answer

var h = $(your_content_element).css('height');

$("#popup").modal({
        containerCss: {
            width: 550,
            height: h
        },

次に、モーダルをトリガーしたときに、スクリプトが高さを再計算する方法を見つける必要があります。

score -2 · Accepted Answer

jquery.simplemodal.js で、

containerCss:{}

これによって：

containerCss:{width: 650}

上部と下部の gif ファイルの css イメージを変更します。

アルマン・デ・グスマン・デ・カストロ著:-)

jquery - jquery simplemodal動的高さ

14 に答える 14

Related

Reference