jquery - example - Desactivar el botón ''X'' en la esquina superior derecha de Dialog

jquery popup window

Question

Posible duplicado:
¿Quitar el botón Cerrar en el cuadro de diálogo jQueryUI?

Estoy tratando de hacer un diálogo que requiera que el usuario acepte los términos antes de continuar, y no quiero permitir que el usuario simplemente haga clic en la ''X'' en la esquina superior derecha del cuadro de diálogo para cerrar. Me gustaría solicitar que el usuario haga clic en ''Acepto''.

¿Hay alguna forma de desactivar la ''X'' en el cuadro de diálogo?

Aclaración: solo estoy usando el diálogo estándar de jQuery UI: $ .dialog ().

Answer 1

Agregué que tenía un problema relacionado: haga una recarga después de que el usuario haga clic en la X para cerrarla en una ventana de diálogo específica, sin volver a cargarla en otras ventanas. Añadí a la función de diálogo jQuery en .js:

.click(function(i){ jQuery(''span.ui-dialog-title'').each(function(index) {


    if (jQuery(this).text() == ''/**Title String Here**/'') {

        a.close(i); location.reload(true); 

    } else {

        a.close(i);
    }

  });
return false})

Esto busca el título en el texto span, y lo vuelve a cargar al cerrarlo, de lo contrario se cierra sin recarga.

Answer 2

En cuanto a su tarea de no permitir que el usuario haga clic en la X, recomendaría uno de los siguientes enfoques:

1. use una regla CSS para configurar la pantalla de ese botón en ''ninguno''. Con el modo Inspeccionar de Firebug, debería poder mirar la etiqueta que el diálogo de la interfaz de usuario de jQuery coloca allí y agregarle una regla de CSS. Si su pantalla no es ninguna, el usuario no debería poder hacer clic en ella.
2. Del mismo modo, adjunte un evento jQuery .click () que no hace nada, y devuelve falso para detener la propagación del evento (nunca he hecho esto, pero debería funcionar).
3. Podría adjuntar una función al evento beforeClose () del diálogo que le permitiría evitar que el diálogo se cierre si el usuario no ha hecho clic en "Acepto".
4. Lo más complicado de todo, pero útil si desea tener diálogos similares o realizar otros cambios funcionales, puede crear una subclase del diálogo jQuery UI creando un plugin de jQuery UI que instancia internamente el diálogo y luego modifica el comportamiento predeterminado aplicando reglas CSS o adjuntando eventos como se describió anteriormente.

Espero que uno de esos te lleve en la dirección correcta ...

Answer 3

Encontré esto en otra publicación, espero que ayude, funcionó para mí:

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

Este es el enlace:

¿Cómo eliminar el botón Cerrar en el cuadro de diálogo de la interfaz de usuario jQuery?

Answer 4

Notamos que el div creado para la barra de título del diálogo tiene un atributo aria-labelledby que hace referencia a su diálogo (ui-dialog-title- {yourDialogName}), así que simplemente oculté la "x" con el siguiente CSS:

div.ui-dialog[aria-labelledby="ui-dialog-title-myDialog"] a.ui-dialog-titlebar-close {
    display: none;
}

También configuro closeOnEscape en falso para evitar eso.

Answer 5

Si su cuadro de diálogo es una ventana emergente normal, no es posible evitar que el usuario cierre la ventana.

Puede usar un complemento de diálogo modal jQuery, como jqModal .

Sin embargo, tenga en cuenta que no puede evitar que el usuario cierre la ventana principal.

EDITAR : si está utilizando el cuadro de diálogo de la interfaz de usuario de jQuery, puede agregar la siguiente regla de CSS:

#someId .ui-dialog-titlebar-close {
    display: none;
}

También deberías configurar closeOnEscape en false .

Además, ¿por qué obligas al usuario a hacer clic en I Agree ?
¿Por qué no puedes tratar una ventana cerrada como si no estuvieras de acuerdo?

Answer 6

Si usa la alert , quizás deba considerar confirm lugar:

if (!confirm("Click OK to confirm that you agree to the terms and conditions.")) {
    // they didn''t click OK
} else {
    // they did.
}

O bien, use jqModal como SLaks mencionado

Answer 7

Solo un complemento a la respuesta de Michael Meadows. Si tiene formularios múltiples y no desea que la variable sea global, puede agregar un atributo al elemento DOM de formulario. Algo como :

$(''#yourForm'').dialog(
 open : function(){
   $(''#yourForm'').attr(''agreed'', false);
 },
 beforeClose : function(){
   return $(''#yourForm'').attr(''agreed'') == ''true'';
 },
 buttons:{''OK'':function(){
        $(''#yourForm'').attr(''agreed'', true);        
        $(this).dialog(''close'');
    },
    ''Cancel'' : function(){
        $(''#yourForm'').attr(''agreed'', false);
        $(this).dialog(''close'');
    }
 }
);

Creo que tienes que comparar con ''verdadero'' y no solo cierto, ya que creo que attr se almacena como una cadena. pero no estoy seguro de eso ...

Answer 8

Supongo que estás usando jQuery UI.

Si es así, adjunte un controlador de eventos beforeClose y devuelva falso de él si no se ha hecho clic en el botón Aceptar. También puede usar CSS para configurar el botón X en {display: none}

var agreed = false; //has to be global
$("something").dialog({
    buttons: {
        ''Apply'': function () {
            agreed = true;
            $(this).dialog("close");
        }
    },
    beforeClose: function () {
        return agreed;
    }
});