Raccomandazione per un semplice esempio di finestra di dialogo jquery?

Ricerca dappertutto per le parole chiave "esempio di finestra di jquery semplice" - con tutte le risposte là fuori, non ho visto alcun esempio semplice e significativo in un succinto documento .html standalone. Anche scaricando diversi libri completi su jQuery, non ho visto alcun esempio.Raccomandazione per un semplice esempio di finestra di dialogo jquery?

Gli esempi che ho trovato sono per una finestra di dialogo che mostra un messaggio di avviso "Hello World" .. non molto utile per l'interazione. Penso che l'esempio del mondo reale sia qualcosa che cattura l'input e lo rimanda alla pagina senza che sia necessario postare sul server. Il post del server può essere un passaggio successivo.

Qualcuno può raccomandare un codice di riferimento lungo queste linee? Grazie

EDIT # 3

ho incollato in una soluzione con un post fresco sotto. È un file completamente autonomo, con include ready-to-go. Funziona per me.

EDIT # 2

ho aggiornato il blocco di testa per contenere il CSS mancante. Il contenuto della finestra di dialogo ora non viene mostrato, ma la finestra di dialogo non si apre e non ci sono errori nella console.

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

EDIT ~ TENTATIVO # 1

Sulla base della risposta da @ rob-schmuecker, ho provato il seguente codice qui sotto. Vedo che funziona su jsFiddle, ma la mia implementazione non funziona. Nel mio browser la console non mostra errori. Ma ci sono due problemi che sto vedendo: carichi

finestra-box content div direttamente nella pagina
clic sul pulsante finestra carico non funziona

Qualsiasi idea di ciò che è sbagliato con questo codice? .. è forse il mio jQuery include chiamate?

<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>

fonte

2014-07-23 gnB

http://jqueryui.com/dialog/#modal-form è esattamente quello che stai chiedendo. –

Intendi 'prompt()'? –

http://jsfiddle.net/robertrozas/VzJe8/112/ – Hackerman

Apprezzo le risposte di tutti - e li ho visti lavorare tutti online su JsFiddle e jqueryui.com. Per quello che stavo cercando, per quanto posso dire, ecco la soluzione più concisa che sono riuscito a ottenere, usando tutti gli accessi remoti e basato sulla soluzione su 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>

fonte

2014-07-23 19:04:26 gnB

OK Qui va

Demo: 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>

Dialog inizia nascosto con i CSS:

#dialog { 
    display:none; 
}

Poi fare qualche Javasc ript:

//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'); 
});

fonte

2014-07-23 17:48:55

Ciao @ rob-schmuecker, in realtà questo è l'esempio più conciso finora credo. Come detto sopra .. per ricapitolare qui: ho provato il codice che hai suggerito, ma non funziona. Nel mio browser la console non mostra errori. Ma ci sono due problemi che sto vedendo: il contenuto della finestra di dialogo viene caricato direttamente nella pagina e facendo clic sul pulsante di dialogo di caricamento non funziona. Vedo che funziona su jsFiddle - Qualche idea su cosa c'è di sbagliato nella mia implementazione? Grazie – gnB

È necessario impostare il CSS per l'ID della finestra di dialogo corretto in modo che non venga visualizzato quando la pagina viene caricata per la prima volta. Devi anche assicurarti di includere jQuery nel tag 'head' della tua pagina. –

@RobSchmuecker, 'autoOpen: false' nasconde automaticamente la finestra di dialogo. Non hai bisogno di 'display: hidden;'. – TricksfortheWeb

Il motivo per cui non funziona è perché le chiamate a jQuery e jQuery UI sono come questo:

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

Ma l'URL per caricarlo da è:

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

Inserisci l'URL corretto e funzionerà.

AGGIUNTA:

Il problema è nella vostra seconda chiamata a jQuery:

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

Inoltre per il fatto che il jQuery viene caricato da https, non c'è jquery.js, è jquery.min.js.

fonte

2015-06-11 17:08:06 TricksfortheWeb

Ho provato il tuo suggerimento di usare https negli urls degli script di intestazione per il codice sotto "EDIT ~ ATTEMPT # 1" .. e anche se sono d'accordo dovrei usare l'https, che non ha risolto il problema .. ancora nessun pop-up . Sei riuscito a far funzionare quel codice aggiungendo semplicemente https? – gnB

nel mio [fiddle] (http://jsfiddle.net/yak613/vfro4okw/), funziona, anche se per qualche ragione, il foglio di stile ui jquery non è caricato. Ma il dialogo funziona come dovrebbe altrimenti. – TricksfortheWeb

Raccomandazione per un semplice esempio di finestra di dialogo jquery?

risposta

Problemi correlati