web-dev-qa-db-fra.com

Recommandation pour un exemple simple de dialogue jquery?

En recherchant partout les mots-clés "exemple de dialogue simple jquery" - avec toutes les réponses, je n’ai pas vu d’exemple simple et significatif dans un document succinct autonome .html. Même en téléchargeant plusieurs livres complets sur jQuery, je ne voyais pas un tel exemple.

Les exemples que j’ai trouvés concernent une boîte de dialogue qui affiche un message d’alerte "Hello World" .. peu utile pour les interactions. Je pense que l'exemple du monde réel consisterait en quelque chose qui capture les entrées et les renvoie à la page sans exiger la publication sur le serveur. La publication sur le serveur peut être une étape ultérieure.

Quelqu'un peut-il recommander une référence de code dans ce sens? Merci

EDIT # 3

J'ai collé dans une solution avec un nouveau post ci-dessous. Il s’agit d’un fichier entièrement autonome, avec des fichiers prêts à l’emploi. Cela fonctionne pour moi.

EDIT # 2

J'ai mis à jour le bloc de tête pour contenir le fichier CSS manquant. Le contenu de la boîte de dialogue n'est pas affiché, mais la boîte de dialogue ne s'ouvre toujours pas .. et aucune erreur dans la console.

                <style>
                #dialog {
                        display:none;
                    }
                </style>

EDIT ~ TENTATIVE # 1

Basé sur la réponse de @ rob-schmuecker, j'ai essayé le code suivant ci-dessous. Je vois que cela fonctionne sur jsFiddle, mais mon implémentation ne fonctionne pas. Dans mon navigateur, la console ne montre aucune erreur. Mais je vois deux problèmes:

  • le contenu div de la boîte de dialogue se charge directement dans la page
  • cliquer sur le bouton de dialogue de chargement ne fonctionne pas

Une idée de ce qui ne va pas avec ce code? .. est-ce peut-être mon jQuery inclure des appels?

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">

      //Initialize dialog

      $("#dialog").dialog({
          autoOpen: false,
          show: {
              effect: "blind",
              duration: 1000
          },
          hide: {
              effect: "explode",
              duration: 1000
          }
      });

      //Open it when #opener is clicked
      $("#opener").click(function () {
          $("#dialog").dialog("open");
      });

      //When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
      $('.formSaver').on('click', function () {
          $('.myTarget').text($('.myInput').val());
          $("#dialog").dialog('close');
      });

      </script>

                <style>
                #dialog {
                        display:none;
                    }
                </style>

    </head>
    <body>

    <div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

    <div id="dialog" title="Basic dialog">
        <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
        <input class="myInput" type="text" />
        <button class="formSaver">Save me!</button>
    </div>

    <button id="opener">Open Dialog</button>

    </body>
    </html>
jqueryjquery-ui-dialog
16
Gene Bo

J'apprécie les réponses de chacun - et je les ai toutes vues travailler en ligne dans JsFiddle et jqueryui.com. Pour autant que je sache, voici la solution la plus concise que j'ai pu réaliser, utilisant tous les inclus distants et basée sur la solution chez Java2s.com:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">

    <script type="text/javascript">
    $(function() {

        // Allows user to click Enter key in text field and it will submit the dialog
        $('#myDialog').keypress(function(e) {
            if (e.keyCode == $.ui.keyCode.ENTER) {
                getResponse();
            }
        });

        var cancel = function() {
            $("#myDialog").dialog("close");
        }

        var getResponse = function() {
            var answer;
            /*// for radio-button selection
            $("input").each(function(){
              (this.checked == true) ? answer = $(this).val() : null;
            });
             */

            answer = $("#first_name").val();

            // This adds it dynamically
            // $("<p>").text(answer).insertAfter($("#poll"));
            $("#result").text(answer);
            $("#myDialog").dialog("close");
        }

        var dialogOpts = {
            modal : true,
            closeOnEscape : true,
            buttons : {
                "Done" : getResponse,
                "Cancel" : cancel
            },
            autoOpen : false
        };
        $("#myDialog").dialog(dialogOpts);
        $("#poll").click(function() {
            $("#myDialog").dialog("open");
        });
    });
    </script>

</head>
<body>
    <button id="poll">Poll</button>
    <div id="myDialog" class="flora" title="This is the title">
      <p>Question?</p>
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes25" name="question"><br>
      <label for="no">No!</label><input type="radio" id="no" value="no" name="question">
      <br/>
      First Name: <input type="text" id="first_name" />

    </div>

    <div style='color: green;' id='result'>
    </div>

</body>
</html>
1
Gene Bo

Ok c'est parti

Démo: http://jsfiddle.net/robschmuecker/9z2ag/1/

HTML:

<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <input class="myInput" type="text" />
    <button class="formSaver">Save me!</button>
</div>

<button id="opener">Open Dialog</button>

Le dialogue commence caché avec CSS:

#dialog {
    display:none;
}

Ensuite, nous faisons du Javascript:

//Initialize dialog
$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});

//Open it when #opener is clicked
$("#opener").click(function () {
    $("#dialog").dialog("open");
});

//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$('.formSaver').on('click', function () {
    $('.myTarget').text($('.myInput').val());
    $("#dialog").dialog('close');
});
10
Rob Schmuecker

Cela ne fonctionne pas parce que vos appels à jQuery et à jQuery UI ressemblent à ceci: 

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Mais l'URL pour le charger est:

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Mettez dans la bonne URL et cela fonctionnera.

UNE ADDITION:

Le problème est dans votre deuxième appel à jQuery: 

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js

Outre le fait que le jQuery est chargé à partir de https, il n'y a pas jquery.js, c'est jquery.min.js. 

4
Yaakov Ainspan