modal - popup javascript ejemplo

jquery-ui-dialog-Cómo enlazar en diálogo cerrar evento

Question

Estoy usando el plugin jquery-ui-dialog

Estoy buscando la manera de actualizar la página cuando en algunas circunstancias, cuando el cuadro de diálogo está cerrado.

¿Hay alguna forma de capturar un evento cercano del diálogo?

Sé que puedo ejecutar el código cuando se hace clic en el botón Cerrar, pero eso no cubre el cierre del usuario con escape o la x en la esquina superior derecha.

Answer 1

A partir de jQuery 1.7, el método .on () es el método preferido para adjuntar manejadores de eventos a un documento.

Porque nadie realmente creó una respuesta con el uso. on() lugar de bind() decidí crear uno.

$(''div#dialog'').on(''dialogclose'', function(event) {
     //custom logic fired after dialog is closed.  
});

Answer 2

¡Lo he encontrado!

Puede ver el evento cercano usando el siguiente código:

 $(''div#popup_content'').on(''dialogclose'', function(event) {
     alert(''closed'');
 });

Obviamente puedo reemplazar la alerta con lo que sea que necesite hacer.
Editar: a partir de Jquery 1.7, bind () se ha convertido en ()

Answer 3

Creo que también puedes hacerlo al crear el diálogo (copiado de un proyecto que hice):

dialog = $(''#dialog'').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

Nota close: CloseFunction

Answer 4

Esto es lo que funcionó para mí ...

$(''#dialog'').live("dialogclose", function(){
   //code to run on dialog close
});

Answer 5

Puede probar el siguiente código para capturar el evento de cierre de cualquier artículo: página, diálogo, etc.

$("#dialog").live(''pagehide'', function(event, ui) {
      $(this).hide();
});

Answer 6

Si entiendo el tipo de ventana de la que está hablando, ¿no le daría $ (window) .unload () (para la ventana de diálogo) el gancho que necesita?

(Y si no entiendo bien, y está hablando de un cuadro de diálogo hecho a través de CSS en lugar de una ventana emergente del navegador, todas las formas de cerrar esa ventana son elementos para los que puede registrar click danders).

Editar: Ah, ahora veo que estás hablando de diálogos jquery-ui, que se realizan a través de CSS. Puede conectar la X que cierra la ventana registrando un manejador de clics para el elemento con la clase ui-dialog-titlebar-close .

Más útil, tal vez, es que le diga cómo resolver eso rápidamente. Mientras visualiza el cuadro de diálogo, solo abra FireBug e inspeccione los elementos que pueden cerrar la ventana. Verá al instante cómo están definidos y eso le brinda lo que necesita para registrar los manejadores de clics.

Entonces, para responder directamente a su pregunta, creo que la respuesta es realmente "no": no hay un evento cercano que pueda engancharse, sino "sí": puede enganchar todas las formas de cerrar el cuadro de diálogo con bastante facilidad y obtener Lo que quieras.

Answer 7

U también puede probar esto

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: ''center'',
            title: ''Term Sheet'',
            beforeClose: function(event, ui) { 
               console.log(''Event Fire'');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

Answer 8

agregue la opción ''cerrar'' como en la muestra y haga lo que quiera en línea

close: function(e){
    //do something
}

Answer 9

$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

La propiedad "cerrar" del diálogo da el evento cercano para el mismo.

Answer 10

$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true, 
buttons: {
  "SUBMIT": function() { 
    $("form").submit();
  }, 
  "CANCEL": function() { 
    $(this).dialog("close");
  } 
},
**close: function() {
  alert(''close'');
}**
});