Recommandation pour un exemple de dialogue jquery simple?

De recherche pour les mots clés "jquery simple dialogue exemple" - avec toutes les réponses, je n'ai pas vu toute simple et significative exemple dans un bref autonome .document html . Même le téléchargement de plusieurs livres sur jQuery, je ne vois pas un tel exemple.

Les exemples que j'ai trouvé sont pour une boîte de dialogue qui affiche un message d'alerte "Hello World" .. pas très utile pour l'interaction. Je pense que le monde réel exemple serait quelque chose qui capture l'entrée et le renvoie à la page sans demander de publier sur le serveur. Le serveur de courrier peut être une étape ultérieure.

Peut-on recommander un code de référence le long de ces lignes? Grâce

EDIT #3

J'ai collé dans une solution avec un nouveau post ci-dessous. C'est un fichier autonome, avec le prêt-à-aller. C'est de travailler pour moi.

EDIT #2

J'ai mis à jour le bloc de tête pour contenir le manque de css. La boîte de dialogue contenu est maintenant de ne pas être montré, mais encore la boîte de dialogue ne s'ouvre pas .. et pas d'erreurs dans la console.

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

MODIFIER ~ TENTATIVE #1

Basé sur la réponse de @rob-schmuecker , j'ai essayé le code suivant ci-dessous. Je le vois travailler sur jsFiddle, mais mon application ne fonctionne pas. Dans mon navigateur, la console n'affiche pas les erreurs. Mais il y a deux problèmes que je vois:

  • boîte de dialogue div chargement du contenu directement dans la page
  • cliquant sur le dialogue de chargement de bouton ne fonctionne pas

Aucune idée de ce qui est mal avec ce code? .. c'est peut-être mon jquery comprennent 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>

source d'informationauteur gnB

  1. 10

    OK va Ici

    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>

    Dialogue commence caché en CSS:

    #dialog {
    display:none;
}

    Puis nous faisons un peu de 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');
});
  2. 4

    La raison pour laquelle il n'est pas le travail, c'est parce que vos appels à jQuery et jQuery UI sont comme ceci: 

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

    Mais l'URL à charger à partir de:

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

    Mettre dans l'URL est correcte et il va fonctionner.

    PLUS:

    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 du protocole https, il n'y a pas de jquery.js il est jquery.min.js.

  3. 1

    J'apprécie tout le monde' avoir des réponses et je les ai vu tous les travaux en ligne dans JsFiddle et jqueryui.com. Pour ce que j'allais après, donc autant que je peux dire, ici, de la manière la plus concise solution que j'ai été capable de faire, à l'aide de tous à distance comprend et basé sur la solution à 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>