Cómo crear un cuadro de diálogo usando jquery-ui sin div HTML especificado

Question

usando jQuery-UI para crear un cuadro de diálogo es bastante fácil:

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

... pero sigue siendo necesario un div en el código HTML para que esto trabajo. En Dojo:

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

solo haría el truco sin que nada se especifica en la sección HTML, puede jQuery-UI hacer esto? (Tengo que usar jquery-ui aquí) Gracias,

David

Answer 1

Aunque no estoy seguro de por qué desea para abrir un diálogo sin contenido, podría crear fácilmente uno nuevo sobre la marcha e invocar el diálogo de jquery en su contra:

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

Answer 2

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

Answer 3

código básico

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"); 

y es probable que pueda poner el rap esto en un método de extensión.

actualización (mi listado de código completo)

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

Ejemplo de uso

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

Answer 4

La solución de Juan Ayalas debería funcionar para Diálogos modales. Para un diálogo no modal, sería mejor rastrear el ID dentro de la función. Uso el siguiente código que no es perfecto, pero debería funcionar para garantizar que el ID sea único. El código es casi igual al ejemplo de Juan Ayalas pero usa un contador para evitar una identificación duplicada. (Además eliminé el botón OK por defecto).

(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