Question

我有一个隐藏的Modal弹出窗口，它以下列方式在HTML中声明：

＆＃13;

<div id="rbe_popupContainer" class="modal hide ui-resizable ui-draggable" style="overflow: hidden; position: fixed; display: none; width: 700px; height: 400px; margin-left: -350px; margin-top: -200px; left: 50%; top: 50%;" aria-hidden="true">
  <div id="rbe_popupContainerHeader">
    <div class="modal-header">
      <button id="rbe_popCloseBox" type="button" class="close" data-dismiss="modal" aria-hidden="true" style="display: block;">×</button> <span style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4em;" id="rbe_popupTitle" class="large bold" title="Attach">Attach</span> 
    </div>
  </div>
  <div class="modal-body" id="rbe_popupIframeContainer" style="padding: 0px; overflow-x: hidden; height: 361px; width: 700px;">
    <iframe src="../xyz.jsp?act=clean&amp;pageId=16238&amp;funcName=create23080" class="full-iframe" style="height: 361px; display: block; width: 700px; background-color: transparent;" frameborder="0" allowtransparency="true" id="rbe_popupFrame"
    name="rbe_popupFrame"></iframe>
    <div id="maskDiv" style="position:absolute;top:0px;left:0px;width:100%;height:100%;display:none">
      <div></div>
    </div>
  </div>
  <div class="ui-resizable-handle ui-resizable-e"></div>
  <div class="ui-resizable-handle ui-resizable-s"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div>
</div>

＆＃13;

当用户点击按钮以使用jQuery打开此模式时，我想更改模态弹出窗口大小，即宽度和高度。我尝试过使用：

$("#rbe_popupContainer").on("show.bs.modal", function() {
      var height = $(window).height() - 200;
      alert(height);
      $(this).find(".modal-body").css("max-height", height);
    });

但它似乎不起作用。调整此模态弹出窗口的最佳方法是什么？有什么建议吗？

Answer 1

您的示例应该有效，我想唯一的错误是您需要将+ 'px'添加到'max-height':height+ 'px'。

因此将jQuery更改为：

$("#rbe_popupContainer").on("show.bs.modal", function() {
    var height = $(window).height() - 200;
    alert(height);
    $(this).find(".modal-body").css("max-height", height + 'px');
});

我创建了一个简单的示例here。

调整隐藏的模态弹出窗口

1 个答案: