web-dev-qa-db-fra.com

Désactivez le bouton «X» en haut à droite de la boîte de dialogue

Duplicata possible:
Supprimer le bouton de fermeture de la boîte de dialogue jQueryUI?

J'essaie de créer une boîte de dialogue qui oblige un utilisateur à accepter les termes avant de continuer, et je ne veux pas autoriser l'utilisateur à simplement cliquer sur le "X" dans le coin supérieur droit de la boîte de dialogue pour fermer. Je voudrais exiger que l'utilisateur clique sur "J'accepte".

Existe-t-il un moyen de désactiver le "X" dans la boîte de dialogue?

Clarification: J'utilise simplement la boîte de dialogue standard jQuery UI: $ .dialog ().

jqueryjquery-uidialogjquery-ui-dialog
40
BAHDev

Je suppose que vous utilisez l'interface utilisateur jQuery.

Si tel est le cas, joignez un gestionnaire d'événements beforeClose et renvoyez-le false si le bouton Accepter n'a pas été cliqué. Vous pouvez également utiliser CSS pour définir le bouton X sur {display: none}

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

J'ai trouvé cela sur un autre post, j'espère que cela aide, cela a fonctionné pour moi:

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

Voici le lien:

Comment supprimer le bouton de fermeture de la boîte de dialogue jQuery UI?

60
foxvor

Si votre boîte de dialogue est une fenêtre contextuelle standard, il n'est pas possible d'empêcher l'utilisateur de fermer la fenêtre.

Vous pouvez utiliser un plugin de dialogue modal jQuery, tel que jqModal .

Notez cependant que vous ne pouvez pas non plus empêcher l'utilisateur de fermer la fenêtre principale.

[~ # ~] modifier [~ # ~] : Si vous utilisez la boîte de dialogue jQuery UI, vous pouvez ajouter la règle CSS suivante:

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

Vous devez également définir closeOnEscape sur false.

Aussi, pourquoi forcez-vous l'utilisateur à cliquer sur I Agree?
Pourquoi ne pouvez-vous pas traiter une fenêtre fermée comme si vous étiez en désaccord?

13
SLaks

Juste un complément à la réponse de Michael Meadows. Si vous avez plusieurs formulaires et que vous ne voulez pas que la variable soit globale, vous pouvez simplement ajouter un attribut à l'élément DOM du formulaire. Quelque chose comme :

$('#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');
    }
 }
);

Je pense que vous devez comparer avec "vrai" et pas seulement vrai, car je pense que attr est stocké sous forme de chaîne. mais je n'en suis pas sûr ...

3
Alexandre

J'ajoute un problème connexe: effectuez un rechargement après que l'utilisateur a cliqué sur le X pour fermer dans une fenêtre de dialogue spécifique, pas de rechargement dans d'autres fenêtres. J'ai ajouté à la fonction de dialogue 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})

Cela recherche le titre dans le texte de l'intervalle et se recharge à la fermeture, sinon se ferme sans rechargement.

3
netefficacy

Vous avez remarqué que le div créé pour la barre de titre de la boîte de dialogue a un attribut aria-labelledby qui fait référence à votre boîte de dialogue (ui-dialog-title- {yourDialogName}), donc j'ai juste caché le "x" avec le CSS suivant:

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

J'ai également défini closeOnEscape sur false pour éviter cela.

3
Jeff

En ce qui concerne votre tâche d'interdire à l'utilisateur de cliquer sur le X, je recommanderais l'une des quelques approches suivantes:

  1. utilisez une règle CSS pour définir l'affichage de ce bouton sur "aucun". En utilisant le mode Inspect de Firebug, vous devriez pouvoir regarder la balise que la boîte de dialogue jQuery UI y place et ajouter une règle CSS pour cela. Si son affichage est nul, l'utilisateur ne devrait pas pouvoir cliquer dessus.
  2. De même, attachez un événement jQuery .click () qui ne fait rien et renvoie false pour arrêter la propagation de l'événement (je n'ai jamais fait celui-ci, mais cela devrait fonctionner).
  3. Vous pouvez attacher une fonction à l'événement beforeClose () de la boîte de dialogue qui vous permettrait d'empêcher la fermeture de la boîte de dialogue si l'utilisateur n'avait pas cliqué sur "J'accepte"
  4. Le plus compliqué de tous, mais utile si vous souhaitez avoir des boîtes de dialogue similaires ou apporter d'autres modifications fonctionnelles, vous pouvez sous-classer la boîte de dialogue jQuery UI en créant un plug-in jQuery UI qui instancie la boîte de dialogue en interne puis modifie le comportement par défaut en appliquant des règles CSS ou en attachant des événements comme décrit ci-dessus.

J'espère que l'un d'eux vous fera avancer dans la bonne direction ...

3
bprotas

Si vous utilisez alert, vous devriez peut-être envisager confirm à la place:

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

Ou utilisez n plugin comme SLaks mentionné

1
nickf