動的に内容のサイズに応じてモーダルダイアログのサイズを変更します。

jspページからmodalDialogを開き、db（modalDialogの場合）を単純なテーブルとして表示します。今、jspからモーダルポップアップを呼び出すとき、私はその幅と高さを指定していますが、私は最終ポップアップがテーブルを保持するだけの十分な高さを持っている必要があります（つまり、テーブルの高さは、。 modalDialogポップアップの完全な読み込みでこのサイズ変更を1回だけ行う必要があります。しかし、私は決して理解できません。私は$（document）.readyハンドラで異なるオプションを試しましたが、役に立たないのです。ここで動的に内容のサイズに応じてモーダルダイアログのサイズを変更します。

は私が親JSPでmodalDialogを呼び出しています方法は次のとおりです。

var varURL = "${pageContext.request.contextPath}/myController/actionStatus.htm?Transaction_id="+trans_id; 
if (window.showModalDialog) { 
    window.showModalDialog(varURL, "popupActionStatus", "dialogWidth:521px; dialogHeight:400px"); 
    closeAllPopups(); 
} else { 
    window.open(varURL, 'popupActionStatus', 'height=400, width=600, toolbar=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, modal=yes'); 
    closeAllPopups(); 
    }

今私はそれが含まれているテーブルの高さに応じてその負荷にこのポップアップのサイズを変更する必要があります。

スクリプト：

$(document).ready(function() { 
     jQuery('.popupStatusDetails').show(); 
     $("#actionStatusPopupTable").tablesorter({ 
     cancelSelection : true 
     }); 
    });

、ポップアップの体はこのようなものです：

<body> 
    <div class="popupStatusDetails" style="top: 0%;left: 0%" id="div1"> 
     <table id="actionStatusPopupTable" width="100%" border="0" cellpadding="0" cellspacing="1" class="tableborder"> 
      <thead> 
       <tr> Headers here </tr> 
      </thead> 
      <tbody> 
       <tr> Data rows here </tr> 
       <tr> Data rows here </tr> 
       <tr> Data rows here </tr> 
       ........... 
      </tbody> 
     </table> 
    </div> 
</body>

私はdocument.readyなど、window.loadにもこれを使用してみましたが、すべてのソリューションを把握することはできません。その後、

window.dialogHeight = document.getElementById("popupStatusDetails").style.height;

私はそれがmodalDialogだだって、これらのものが動作しないと思いますが、（

出典

2011-08-10 Prakhar

...あなたは$（ 'actionStatusPopupTableのようにテーブルの高さを取得しようとしています'）.outerHeight（）とそれから必要なものの高さを設定しますか？ – vector

はい、動作しませんでした。それに伴う高さへの影響はありません。私はそれにポップアップの高さを設定しましたが、変更されませんでした。 – Prakhar

http://jqueryui.com/demos/dialog/をご覧ください。たぶんこれはあなたに役立つでしょう –

function showCenteredLayer(layerID) { 
var object = $('#'+layerID); 
object.css("position","absolute"); 
object.css("top", ($(window).height() - object.height())/2+$(window).scrollTop() + "px"); 
object.css("left", ($(window).width() - object.width())/2+$(window).scrollLeft() + "px"); 
MM_showHideLayers(layerID,'','show'); 
}

これは、私がウェブページ内のソフトダイアログをセンタリングするために使用するいくつかのJQueryコードです。この種のコードを使用して寸法を計算し、window.openに入力できますか？

Hmm ...おそらくオブジェクトを非表示のDIVにロードし、表示されていなくてもJQueryが次元を推測できるかどうかを確認します。

出典

2011-08-11 16:19:26 cs94njw

このような何かがあなたのために働くかもしれないかしら - 似た何かが非常によく私のために提供している...

$(document).ready(function() { 

    //Determine page size 
    var $actionStatusPopupTable= $("#actionStatusPopupTable"); 
    var iWidth = $actionStatusPopupTable.width() + 20, 
    iHeight = $actionStatusPopupTable.height() + 35; 

    //Resize page to just larger than tblDetails 
    if (document.all) { 

    //IE 
    window.dialogWidth = iWidth + "px"; 
    window.dialogHeight = iHeight + "px"; 
    } 
    else { 

    //Non IE 
    iHeight += 55; //Non IE quirk 
    window.resizeTo(iWidth, iHeight); 
    } 
}

出典

2011-12-09 10:01:29

動的に内容のサイズに応じてモーダルダイアログのサイズを変更します。

答えて

関連する問題