jqModal溢出我的页面

jqModal overflowing my page

本文关键字：我的 溢出 jqModal      更新时间：2023-09-26

我使用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>

如果你的模态是<div id="AddGameTypeWindow" title="Add Game Type" style="display:none"></div>，试着给它一个固定的高度，并添加overflow:auto到他的风格，这样，如果模态内容大于你的固定高度，滚动条将出现

您有两个选择。你可以有一个固定的宽度和高度，并设置溢出自动像已经建议。如果你在寻找灵活的宽度，你也可以做相对于窗口的大小。

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

当你应用width:

时，你可以将它相乘来得到一个百分比
width: getWidth() * 0.5; // A 50% width
相关文章：