javascript - example - jQuery UI-Cerrar el cuadro de diálogo cuando se hace clic afuera

jquery popup window

Question

Tengo un cuadro de diálogo de jQuery UI que se muestra cuando se hace clic en elementos específicos. Me gustaría cerrar el diálogo si se produce un clic en cualquier lugar que no sea en esos elementos desencadenantes o en el diálogo mismo.

Aquí está el código para abrir el diálogo:

$(document).ready(function() {
    var $field_hint = $(''<div></div>'')
        .dialog({
            autoOpen: false,
            minHeight: 50,
            resizable: false,
            width: 375
        });

    $(''.hint'').click(function() {
        var $hint = $(this);
        $field_hint.html($hint.html());
        $field_hint.dialog(''option'', ''position'', [162, $hint.offset().top + 25]);
        $field_hint.dialog(''option'', ''title'', $hint.siblings(''label'').html());
        $field_hint.dialog(''open'');
    });
    /*$(document).click(function() {
        $field_hint.dialog(''close'');
    });*/
});

Si elimino el comentario de la última parte, el diálogo nunca se abre. Supongo que es porque el mismo clic que abre el cuadro de diálogo lo está cerrando de nuevo.

Código de trabajo final
Nota: Esto está usando el plugin jQuery fuera de eventos

$(document).ready(function() {
    // dialog element to .hint
    var $field_hint = $(''<div></div>'')
            .dialog({
                autoOpen: false,
                minHeight: 0,
                resizable: false,
                width: 376
            })
            .bind(''clickoutside'', function(e) {
                $target = $(e.target);
                if (!$target.filter(''.hint'').length
                        && !$target.filter(''.hintclickicon'').length) {
                    $field_hint.dialog(''close'');
                }
            });

    // attach dialog element to .hint elements
    $(''.hint'').click(function() {
        var $hint = $(this);
        $field_hint.html(''<div style="max-height: 300px;">'' + $hint.html() + ''</div>'');
        $field_hint.dialog(''option'', ''position'', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
        $field_hint.dialog(''option'', ''title'', $hint.siblings(''label'').html());
        $field_hint.dialog(''open'');
    });

    // trigger .hint dialog with an anchor tag referencing the form element
    $(''.hintclickicon'').click(function(e) {
        e.preventDefault();
        $($(this).get(0).hash + '' .hint'').trigger(''click'');
    });
});

Answer 1

Con el siguiente código, puede simular un clic en el botón ''cerrar'' del diálogo (cambie la cadena ''MY_DIALOG'' por el nombre de su propio cuadro de diálogo)

$("div[aria-labelledby=''ui-dialog-title-MY_DIALOG''] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();

Answer 2

Es simple en realidad no necesitas complementos, simplemente jquery o puedes hacerlo con javascript simple.

$(''#dialog'').on(''click'', function(e){
  e.stopPropagation();
});
$(document.body).on(''click'', function(e){
  master.hide();
});

Answer 3

Esta pregunta es un poco antigua, pero en caso de que alguien quiera cerrar un cuadro de diálogo que NO sea modal cuando el usuario haga clic en algún lugar, puede usar esto que tomé del plugin de JEduard UI Multiselect . La principal ventaja es que el clic no se "pierde" (si el usuario desea hacer clic en un enlace o un botón, la acción se realiza).

$myselector.dialog({
            title: "Dialog that closes when user clicks outside",
            modal:false,
            close: function(){
                        $(document).off(''mousedown.mydialog'');
                    },
            open: function(event, ui) { 
                    var $dialog = $(this).dialog(''widget'');
                    $(document).on(''mousedown.mydialog'', function(e) {
                        // Close when user clicks elsewhere
                        if($dialog.dialog(''isOpen'') && !$.contains($myselector.dialog(''widget'')[0], e.target)){
                            $myselector.dialog(''close'');
                        }            
                    });
                }                    
            });

Answer 4

Este es el único método que funcionó para mí para mi diálogo NO MODAL

$(document).mousedown(function(e) {
    var clicked = $(e.target); // get the element clicked
    if (clicked.is(''#dlg'') || clicked.parents().is(''#dlg'') || clicked.is(''.ui-dialog-titlebar'')) {
        return; // click happened within the dialog, do nothing here
    } else { // click was outside the dialog, so close it
        $(''#dlg'').dialog("close");
    }
});

Todo el mérito es para Axle
Haga clic fuera del cuadro de diálogo no modal para cerrar

Answer 5

Esto no utiliza la interfaz de usuario de jQuery, pero sí utiliza jQuery, y puede ser útil para aquellos que no usan la interfaz de usuario de jQuery por el motivo que sea. Hazlo así:

function showDialog(){
  $(''#dialog'').show();
  $(''*'').on(''click'',function(e){
    $(''#zoomer'').hide();
  });
}

$(document).ready(function(){

  showDialog();    

});

Entonces, una vez que he mostrado un diálogo, agrego un manejador de clic que solo busca el primer clic en cualquier cosa.

Ahora, sería mejor si pudiera hacer que ignorara los clics en cualquier cosa en #dialog y sus contenidos, pero cuando intenté cambiar $ (''*'') con $ ('': not ("# dialog, # dialog *") ''), aún detectó clics en #dialog.

De todos modos, estaba usando esto puramente para una foto lightbox, así que funcionó bien para ese propósito.

Answer 6

Los ejemplos dados usan un diálogo con id ''#dialog'', necesitaba una solución que cierra cualquier diálogo:

$.extend($.ui.dialog.prototype.options, {
    modal: true,
    open: function(object) {
        jQuery(''.ui-widget-overlay'').bind(''click'', function() {              
            var id = jQuery(object.target).attr(''id'');
            jQuery(''#''+id).dialog(''close'');
        })
    }
});

Gracias a mi colega Youri Arkesteijn por la sugerencia de usar un prototipo.

Answer 7

Mira el plugin jQuery Outside Events

Te permite:

$field_hint.bind(''clickoutside'',function(){
    $field_hint.dialog(''close'');
});

Answer 8

No creo que encontrar elementos de diálogo usando $ (''. Any-selector'') de todo el DOM sea tan brillante.

Tratar

$(''<div />'').dialog({
    open: function(event, ui){
        var ins = $(this).dialog(''instance'');
        var overlay = ins.overlay;
        overlay.off(''click'').on(''click'', {$dialog: $(this)}, function(event){
            event.data.$dialog.dialog(''close'');
        });
    }
});

Realmente está obteniendo la superposición de la instancia de diálogo a la que pertenece, las cosas nunca van a salir mal de esta manera.

Answer 9

Olvídate de usar otro plugin:

Aquí hay 3 métodos para cerrar un diálogo de la interfaz de usuario de jquery al hacer clic en popin exterior:

Si el diálogo es modal / tiene una superposición de fondo: http://jsfiddle.net/jasonday/6FGqN/

jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true,
        open: function(){
            jQuery(''.ui-widget-overlay'').bind(''click'',function(){
                jQuery(''#dialog'').dialog(''close'');
            })
        }
    });
}); 

Si el diálogo no es modal Método 1: método 1: http://jsfiddle.net/jasonday/xpkFf/

 // Close Pop-in If the user clicks anywhere else on the page
                     jQuery(''body'')
                      .bind(
                       ''click'',
                       function(e){
                        if(
                         jQuery(''#dialog'').dialog(''isOpen'')
                         && !jQuery(e.target).is(''.ui-dialog, a'')
                         && !jQuery(e.target).closest(''.ui-dialog'').length
                        ){
                         jQuery(''#dialog'').dialog(''close'');
                        }
                       }
                      );

Diálogo no modal Método 2: http://jsfiddle.net/jasonday/eccKr/

  $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false, 
                minHeight: 100,
                width: 342,
                draggable: true,
                resizable: false,
                modal: false,
                closeText: ''Close'',
                  open: function() {
                      closedialog = 1;
                      $(document).bind(''click'', overlayclickclose);
                  },
                  focus: function() {
                      closedialog = 0;
                  },
                  close: function() {
                      $(document).unbind(''click'');
                  }



        });

         $(''#linkID'').click(function() {
            $(''#dialog'').dialog(''open'');
            closedialog = 0;
        });

         var closedialog;

          function overlayclickclose() {
              if (closedialog) {
                  $(''#dialog'').dialog(''close'');
              }

              //set to one because click on dialog box sets to zero
              closedialog = 1;
          }


  });

Answer 10

Para aquellos que les interesan, he creado un complemento genérico que permite cerrar un diálogo al hacer clic fuera de él, ya sea un diálogo modal o no modal. Admite uno o varios cuadros de diálogo en la misma página.

Más información aquí: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Laurent

Answer 11

Perdón por arrastrar esto después de tanto tiempo pero utilicé el de abajo. Cualquier desventaja? Ver la función de abrir ...

$("#popup").dialog(
{
    height: 670,
    width: 680,
    modal: true,
    autoOpen: false,
    close: function(event, ui) { $(''#wrap'').show(); },
    open: function(event, ui) 
    { 
        $(''.ui-widget-overlay'').bind(''click'', function()
        { 
            $("#popup").dialog(''close''); 
        }); 
    }
});

Answer 12

Puede hacerlo sin usar ningún complemento adicional

var $dialog= $(document.createElement("div")).appendTo(document.body);
    var dialogOverlay;

    $dialog.dialog({
        title: "Your title",
        modal: true,
        resizable: true,
        draggable: false,
        autoOpen: false,
        width: "auto",
        show: "fade",
        hide: "fade",
        open:function(){
            $dialog.dialog(''widget'').animate({
                width: "+=300", 
                left: "-=150"
            });

//get the last overlay in the dom
            $dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
            $dialogOverlay.unbind();
            $dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
                $dialog.dialog("close");
            });
        }
    });

Aquí $ diálogo es el diálogo. Lo que estamos haciendo básicamente es obtener el último widget de superposición cada vez que se abre este cuadro de diálogo y vincular un controlador de clics a esa superposición para cerrar $ dialog como cada vez que se hace clic en la superposición.

Answer 13

Simplemente agregue este script global, que cierra todos los cuadros de diálogo modales simplemente haciendo clic sobre ellos.

$(document).ready(function()
{
    $(document.body).on("click", ".ui-widget-overlay", function()
    {
        $.each($(".ui-dialog"), function()
        {
            var $dialog;
            $dialog = $(this).children(".ui-dialog-content");
            if($dialog.dialog("option", "modal"))
            {
                $dialog.dialog("close");
            }
        });
    });;
});

Answer 14

Tenía que hacer dos partes. Primero, el manejador de clics externo:

$(document).on(''click'', function(e){
    if ($(".ui-dialog").length) {
        if (!$(e.target).parents().filter(''.ui-dialog'').length) {
            $(''.ui-dialog-content'').dialog(''close'');
        }
    }
}); 

Esto llama al dialog(''close'') en la clase genérica de ui-dialog-content , y por lo tanto cerrará todos los cuadros de diálogo si el clic no se originó en uno. También funcionará con diálogos modales, ya que la superposición no forma parte del .ui-dialog .

El problema es:

1. La mayoría de los diálogos se crean debido a los clics fuera de un diálogo
2. Este controlador se ejecuta después de que los clics hayan creado un cuadro de diálogo y se hayan borrado hasta el documento, por lo que los cierra inmediatamente.

Para solucionar esto, tuve que agregar stopPropagation a esos manejadores de clics:

moreLink.on(''click'', function (e) {
    listBox.dialog();
    e.stopPropagation(); //Don''t trigger the outside click handler
});

Answer 15

Tuve el mismo problema al hacer una vista previa modal en una página. Después de mucho google, encontré esta solución muy útil. Con el evento y el objetivo, se comprueba dónde sucedió el clic y, dependiendo de ello, se activa la acción o no se hace nada.

Sitio de la biblioteca de código de Snippet

$(''#modal-background'').mousedown(function(e) {
var clicked = $(e.target);  
if (clicked.is(''#modal-content'') || clicked.parents().is(''#modal-content'')) 
    return; 
} else {  
 $(''#modal-background'').hide();
}
});

Answer 16

Utilizo esta solución basada en una publicada aquí:

var g_divOpenDialog = null;
function _openDlg(l_d) {

  // http://.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
  jQuery(''body'').bind(
   ''click'',
   function(e){
    if(
      g_divOpenDialog!=null 
      && !jQuery(e.target).is(''.ui-dialog, a'')
      && !jQuery(e.target).closest(''.ui-dialog'').length
    ){
      _closeDlg();
    }
   }
  );

  setTimeout(function() {
    g_divOpenDialog = l_d;
    g_divOpenDialog.dialog();
  }, 500);
}
function _closeDlg() {
  jQuery(''body'').unbind(''click'');
  g_divOpenDialog.dialog(''close'');
  g_divOpenDialog.dialog(''destroy'');
  g_divOpenDialog = null;
}

Answer 17

no es necesario el complemento de eventos externos ...

simplemente agregue un manejador de eventos al .ui-widget-overlay div:

jQuery(document).on(''click'', ''body > .ui-widget-overlay'', function(){
     jQuery("#ui-dialog-selector-goes-here").dialog("close");
     return false;
});

solo asegúrese de que cualquier selector que haya utilizado para el diálogo jQuery ui, también se llame para cerrarlo ... es decir, # ui-dialog-selector-goes-here

Answer 18

$(".ui-widget-overlay").click (function () {
    $("#dialog-id").dialog( "close" );
});

Fiddle muestra el código anterior en acción.