jqModal overflowing my page

Я использую jqModal для создания модального окна с использованием ajax, который содержит форму для заполнения. Родительское окно содержит только половину страницы данных, поэтому не содержит полос прокрутки. Когда модальное окно загружается, форма переполняет страницу, а нижняя часть не видна. Каким был бы лучший способ создать модальное окно, содержащее полосы прокрутки, когда это необходимо, или добавить полосы прокрутки в родительское окно, чтобы весь модал можно прокручивать вверх и вниз? Код выглядит следующим образом:jqModal overflowing my page

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>

источник

2013-06-17 Dirk Dastardly

Вы можете PLese сделать jsfiddle или уточнить некоторые детали больше, потому что я не знаю, где «/ maintenance/AddGameType.html 'is ... –

Или подготовьте демоверсию, возможно, проблему css. –

Если модальное <div id="AddGameTypeWindow" title="Add Game Type" style="display:none"></div> попытаться дать ему фиксированную высоту и добавляя overflow:auto к его стилю, так что если модальное содержание больше, чем ваша фиксированная высота, появятся полосы прокрутки.

источник

2013-06-20 15:48:07

Работает отлично. Это было именно то, что мне нужно. –

У вас есть два варианта сделать это. Вы можете иметь фиксированную ширину и высоту и установить переполнение для автоматического использования, как уже было предложено. Если вы ищете гибкую ширину, вы также можете сделать это относительно размера окна.

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

И тогда вы можете умножить его, чтобы получить процент, когда вы применяете ширина:

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

источник

2013-06-25 10:09:29

ответ

Смежные вопросы