web-dev-qa-db-fra.com

Taille de la boîte de dialogue JQueryUI

Je suis nouveau sur JQueryUI, et bien qu'une boîte de dialogue fonctionne, elle ne s'ouvre pas à la taille que je pense que je spécifie. Pourquoi la définition de la largeur et de la hauteur lorsque la boîte de dialogue est définie n'affecte-t-elle pas la taille initiale de la boîte de dialogue? Comment puis-je faire 600px par 500 px?

Voici le div qui définit la boîte de dialogue:

<div id="dialog-form" title="Create Appointment">   
  <form> . . . </form>
</div>

Voici le JavaScript qui en fait une boîte de dialogue:

$(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        maxWidth:600,
        maxHeight: 500,
        width: 600,
        height: 500,
        modal: true,
        buttons: {
            "Create": function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
        }
    });

Et le JavaScript qui définit le bouton pour l'ouvrir:

$("#create-appt")
    .button()
    .click(function() {
        $("#dialog-form").dialog("open");
    });
});

Modifier:

Je vois maintenant le problème: cela aurait bien fonctionné, sauf que je l'exécutais dans Google Chrome utilisant le --app=... option de ligne de commande, donc il ne rechargeait pas toute l'application.

jqueryjquery-uijquery-ui-dialog
27
JasonFruit

Question: Pourquoi la définition de la largeur et de la hauteur lorsque la boîte de dialogue est définie n'affecte-t-elle pas la taille initiale de la boîte de dialogue?

Réponse: Il fait ... quel navigateur utilisez-vous et version de jQuery.

J'ai coupé/collé votre code d'en haut dans un petit échantillon et cela a parfaitement fonctionné ... J'ai collé l'échantillon complet ci-dessous, vous pouvez l'essayer de votre côté.

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css"      rel="stylesheet" />  
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js">     </script>
        <script type="text/javascript">
        $(document).ready(function () {
            $(function() {
            $("#dialog-form").dialog({
                autoOpen: false,
                    maxWidth:600,
                    maxHeight: 500,
                    width: 600,
                    height: 500,
                    modal: true,
                    buttons: {
                    "Create": function() {
                    $(this).dialog("close");
                    },
                    Cancel: function() {
                    $(this).dialog("close");
                    }
                },
                    close: function() {
                }
                });
            });

            $("#create-appt")
            .button()
            .click(function() {
                $("#dialog-form").dialog("open");
            });
        });
        </script>

    </head>
        <body>
    <h1>test</h1>
    <div id="dialog-form" title="Create Appointment">   
        <p> this is my test </p>
    </div>
    <input type="button" id="create-appt" value="test"/>
    </body>
 </html>
30
Todd

Je ne sais pas exactement ce qui se passe, mais vous pouvez changer un peu votre code et cela produira le résultat que vous attendez:

Au lieu d'utiliser autoOpen, vous pouvez définir ces options sur l'événement onclick:

$("#create-appt")
    .button()
    .click(function() {
        $("#dialog-form").dialog({width: 600,height:500});
    });

J'espère que cela aide les meilleures salutations, Marcelo Vismari

15
Vismari