jqModal débordant ma page

J'utilise jqModal pour créer une fenêtre modale en utilisant ajax qui contient un formulaire à remplir. La fenêtre parent contient seulement environ une demi-page de données, donc ne contient pas de barres de défilement. Lorsque la fenêtre modale est chargée, le formulaire déborde la page et la partie inférieure n'est pas visible. Quel serait le meilleur moyen de créer une fenêtre modale qui contient des barres de défilement si nécessaire ou d'ajouter des barres de défilement à la fenêtre parente afin que tout le modal puisse être déplacé de haut en bas? Code est la suivante:jqModal débordant ma 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>

Source

2013-06-17 Dirk Dastardly

Pouvez-vous faire un plese jsFiddle ou préciser quelques détails plus, parce que je ne sais pas où «/maintenance/AddGameType.html 'est ... –

Ou préparez une page de démonstration, probablement un problème de css. –

Si votre modal est <div id="AddGameTypeWindow" title="Add Game Type" style="display:none"></div> essayer de donner une hauteur fixe et en ajoutant overflow:auto à son style de sorte que si le contenu modal est supérieur à votre hauteur fixe, les barres de défilement apparaîtront.

Source

2013-06-20 15:48:07

Fonctionne parfaitement. C'était exactement ce dont j'avais besoin. –

Vous avez deux options pour cela. Vous pouvez soit avoir une largeur et une hauteur fixes et régler le débordement sur auto comme déjà suggéré. Si vous recherchez une largeur flexible, vous pouvez également le faire par rapport à la taille de la fenêtre.

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

Et vous pouvez multiplier pour obtenir un pourcentage lorsque vous appliquez la largeur:

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

Source

2013-06-25 10:09:29

jqModal débordant ma page

Répondre

Questions connexes