jqModal 溢出我的页面答案

【问题标题】：jqModal overflowing my pagejqModal 溢出我的页面
【发布时间】：2013-06-17 01:54:14
【问题描述】：

我正在使用 jqModal 创建一个使用 ajax 的模式窗口，其中包含要填写的表单。父窗口只包含大约半页数据，因此不包含滚动条。模态窗口加载时，窗体溢出页面，底部不可见。在需要时创建包含滚动条的模态窗口或将滚动条添加到父窗口以便整个模态可以上下滚动的最佳方法是什么？代码如下：

Javascript：

$(document).ready(function () {

    $("#AddGameTypeWindow").jqm({
        ajax: '/maintenance/AddGameType.html',
        modal: true,
        trigger: "#NewGameTypeButton"
    });
});

HTML：

<body>
    <div id="AddGameTypeWindow" title="Add Game Type" style="display:none"></div>
    <div id="AddLocationWindow" class="jqmWindow" style="width:640px;height:480px"></div>
    <table>
        <tr>
            <td>Game Type</td><td><select id="GameType"><option value="0"></option></select>&nbsp;<button id="NewGameTypeButton" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-plus"></span></button></td>
        </tr>

【问题讨论】：

能否请您制作一个 jsfiddle 或详细说明一些细节，因为我不知道 '/maintenance/AddGameType.html' 在哪里...
或者准备一个演示页面，可能是css问题。

标签： javascript jquery jqmodal

【解决方案1】：

如果您的模态框是<div id="AddGameTypeWindow" title="Add Game Type" style="display:none"></div>，请尝试给它一个固定高度并将overflow:auto 添加到他的样式中，这样如果模态框内容大于您的固定高度，就会出现滚动条。

【讨论】：

完美运行。这正是我所需要的。

【解决方案2】：

您有两种选择。您可以拥有固定的宽度和高度，并将溢出设置为自动，就像已经建议的那样。如果您正在寻找灵活的宽度，您也可以相对于窗口的大小进行调整。

<script>
  function getWidth(){
    return $(window).width(); 
  }
</script>

然后你可以在应用宽度时乘以它得到一个百分比：

width: getWidth() * 0.5; // A 50% width

【讨论】：