Come creare un dialogo utilizzando jQuery-ui senza html div specificato

Question

utilizzando jQuery-ui per creare una finestra di dialogo è abbastanza facile:

<script> 
$(function() { 
    $("#dialog").dialog(); 
}); 
</script> 

<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

... ma uno ha bisogno ancora di un div in HTML per questo lavoro. In Dojo:

var dlg = new dijit.Dialog({ 
    title:"dialog", 
    style: "width:30%;height:300px;" 
}); 
dlg.show(); 

sarebbe solo fare il trucco, senza nulla specificato nella sezione html, può jquery-ui fare questo? (Devo usare jQuery-ui qui) Grazie,

David

Answer 1

Mentre io non sono sicuro del perché si vorrebbe aprire una finestra senza contenuto, è potrebbe facilmente crearne una nuova al volo e richiamare la finestra di dialogo jquery contro di essa:

$("<div>hello!</div>").dialog(); 

Answer 2

var div = document.createElement('div'); 
div.innerHTML = "Hello World"; 
$(div).dialog(); 

Answer 3

codice di base

var d = $("#someId"); 
if (d.length < 1) 
    d = $("<div/>").attr("id", "someId") 
        .appendTo("body"); 
else 
    d.dialog('destroy'); 
d.html('some message') 
.dialog({ some_options }) 
.dialog("open"); 

e, probabilmente, si può mettere rap questo in un metodo di estensione.

Aggiornamento (il mio pieno listato di codice)

(function($) { 
    $.extend({ 
     showPageDialog: function (title, content, buttons, options) { 
      /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary> 
      /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to single OK button.</param> 
      /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param> 
      if (!buttons) 
       buttons = { "Ok": function() { $(this).dialog("close"); } }; 
      var defOptions = { 
       autoOpen: false, 
       modal: true, 
       //show: "blind", 
       //hide: "explode", 
       title: title, 
       buttons: buttons 
      }; 
      if (options) 
       defOptions = $.extend(defOptions, options); 
      var pd = $("#pageDialog"); 
      if (pd.length < 1) 
       pd = $("<div/>").attr("id", "pageDialog") 
           .appendTo("body"); 
      else 
       pd.dialog('destroy'); 
      pd.html(content) 
       .dialog(defOptions) 
       .dialog("open"); 
     } 
    }//end of function show... 
)//end of extend Argument 
})(jQuery) 

Sample dell'uso

$.showPageDialog(title, message, { 
       "Yes": function() { 
        $(this).dialog("close"); 
        // do something for 'yes' 
       }, 
       "No": function() { 
        // do something for no 
       } 
     } 

Answer 4

La soluzione Juan Ayalas dovrebbe funzionare per i dialoghi modali. Per una finestra di dialogo non modale, sarebbe meglio rintracciare l'id all'interno della funzione. Io uso il seguente codice che non è perfetto ma dovrebbe funzionare per garantire che l'ID sia univoco. Il codice è quasi uguale all'esempio di Juan Ayalas ma utilizza un contatore per evitare un id duplicato. (Inoltre ho cancellato il pulsante OK come predefinito).

(function($) 
    { 
    var dCounter=0; //local but "static" var 
    $.extend({ 
    showPageDialog: function (title, content, buttons, options) { 
     /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary> 
     /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to nothing (single OK button).</param> 
     /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param> 
     if (!buttons) 
      buttons = {}; //{ "Ok": function() { $(this).dialog("close"); } }; 
     var defOptions = { 
      autoOpen: false, 
      width: "auto", 
      modal: false, 
      //show: "blind", 
      //hide: "explode", 
      title: title, 
      buttons: buttons 
     }; 
     if (options) 
      defOptions = $.extend(defOptions, options); 
     dCounter++; 
     //console.log("dCounter is " + dCounter); 
     var pdId = "#pageDialog"+dCounter;   
     var pd = $(pdId); 
     if (pd.length < 1) 
      pd = $("<div/>").attr("id", pdId)   
          .appendTo("body"); 
     else 
      pd.dialog('destroy'); 

     pd.html(content) 
      .dialog(defOptions) 
      .dialog("open"); 
    }//end of function showPageDialog 
    }//end of extend options 
)//end of extend argument 
    }//end of function definition