cuadro de diálogo múltiple dentro de la misma página

El requisito es mostrar el cuadro de diálogo al hacer clic en un botón. He creado un cuadro de diálogo usando jQuery UI. Encuentre el código aquí http://jsfiddle.net/M4QM6/32/ . Si tengo una sola función para crear un cuadro de diálogo, ¿cómo puedo mostrar múltiples cuadros de diálogo en la misma página con cada cuadro de diálogo mostrando diferentes datos? Cuando hago clic en el botón dialog2, necesito mostrar un cuadro de diálogo que tiene textArea y un botón de enviar .Por favor recomiende. A continuación se muestra el código de muestra:

$(function() { $("#dialog").dialog({ autoOpen: false, resizable: true, width:"750", height:300, modal: true, buttons: { "Close": function() { $(this).dialog("close"); } } }); }); 

Podrías ir un par de rutas. Dado que su necesidad de contenido de diálogo es bastante específica (control de área de texto – el primer cuadro de diálogo muestra el segundo cuadro de diálogo, etc.), codificaría los divs necesarios en la página. Por lo tanto, cree un div “#textAreaDialog” y coloque los controles necesarios en su anuncio para configurar su estilo: none.

Luego, modifique su función para aceptar parámetros (el nombre del div que debe aparecer, la función a ejecutar si se hace clic en “Aceptar” y la función para ejecutar si se hace clic en “Cancelar”), por lo que no está limitado a usando #dialog para todos tus modales y puedes controlar finamente lo que sucede cuando se hace clic en cada botón (no siempre solo se cierra el diálogo. Luego, configura los manejadores de eventos para los eventos de clic de los botones que necesitas, y llama al diálogo en consecuencia.

html:

     

Funciones de Javascript:

  function PopDialog(divToPop, OkFunction, CancelFunction) { $("#" + divToPop).dialog({ autoOpen: false, resizable: true, width:"750", height:300, modal: true, buttons: { "Ok": function() { OkFunction(); $(this).dialog("close"); }, "Cancel": function(){ CancelFunction(); $(this).dialog("close"); } } }); }); } function PopSecondModal(){ PopDialog("divSecondModal", function(){ put code for OK Click here}, function(){put code for Cancel Click here}); } 

Gestores de eventos de Javascript:

  $("#btnPopFirstModal").click(function(e){ e.preventDefault(); PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed return false; }); 

Recuerde, puede expandir esto tanto como quiera, agregando más manejadores de eventos y divs personalizados para usar para modales más personalizados. Además, como puede ver, puede escribir sus funciones OK y Cancelar en línea al llamar a la función PopDialog, o puede pasarle un nombre de función (esto es preferible si va a reutilizar esa función).

Así es como lo hice:

 $( //when JQuery is ready funciton() { $('#SomeButton').on ( 'click', function() { //Note that content could be anything (HTML, text...) //This dynamicly create a div to be your dialog $('
').append(content).dialog ( { //autoOpen: false, I removed it you can put it back in if you need it but I dont think its important for now resizable: true, //I remove the double quotes here because height didn't have any but maybe it was the other way around width:750, height:300, //I put this on false because if two or more dialog would need to be displayed at the same time you can't have them modals. modal: false, buttons: { Close: function() { $(this).dialog("close"); } }, //this is important it destroys and remove the dynamically create dialog when you close them so you don't get 20 dialog not displayed in your html markup. close: function() { $(this).dialog('destroy').remove(); } } ); } ); } );