Изменение размера модального диалога в соответствии с его размером содержимого динамически - PullRequest
Новая
       20

Изменение размера модального диалога в соответствии с его размером содержимого динамически

0 голосов
/ 10 августа 2011

У меня есть открытие modalDialog со страницы jsp, которое извлекает данные из базы данных и показывает их (на modalDialog) в виде простой таблицы.Теперь, при вызове модального всплывающего окна из jsp, я указываю его ширину и высоту, но я хочу, чтобы конечное всплывающее окно имело высоту, достаточную только для хранения таблицы (т. Е. Высота таблицы может отличаться, если можно получить больше строк),Мне нужно сделать это изменение размера только один раз при полной загрузке всплывающего окна modalDialog.Но я никак не могу понять.Я пробовал разные опции в обработчике $ (document) .ready, но безрезультатно.

Вот как я вызываю modalDialog в родительском jsp: 

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>

Я пытался использовать это также в window.load, document.ready и т. Д.,но не могу найти никакого решения: 

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

Я думаю, что эти вещи не работают, потому что это modalDialog, но тогда наверняка должен быть какой-то способ: (

Ответы [ 2 ]

0 голосов
/ 09 декабря 2011

Интересно, может ли что-то подобное сработать для вас - что-то подобное служит мне довольно хорошо ... 

$(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);
  }
}
0 голосов
/ 11 августа 2011 
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?

Хмм ... возможно загрузить объект в скрытый DIV и посмотреть, сможет ли JQuery угадать размеры, даже если он не показан?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...