wake-up-neo.com

Deaktivieren Sie die Schaltfläche "X" oben rechts im Dialogfeld

Mögliches Duplikat:
Schließen-Button im jQueryUI-Dialog entfernen?

Ich versuche, ein Dialogfeld zu erstellen, in dem ein Benutzer den Begriffen zustimmen muss, bevor er fortfahren kann, und möchte nicht zulassen, dass der Benutzer zum Schließen einfach auf das 'X' in der oberen rechten Ecke des Dialogfelds klickt. Ich möchte, dass der Benutzer auf "Ich stimme zu" klickt.

Gibt es eine Möglichkeit, das 'X' im Dialogfeld zu deaktivieren?

Erläuterung: Ich verwende nur den Standarddialog der jQuery-Benutzeroberfläche: $ .dialog ().

40
BAHDev

Ich gehe davon aus, dass Sie die jQuery-Benutzeroberfläche verwenden.

Wenn dies der Fall ist, fügen Sie eine Ereignisbehandlungsroutine beforeClose hinzu und geben Sie false zurück, wenn auf die Schaltfläche Zustimmen nicht geklickt wurde. Sie können auch CSS verwenden, um die X-Schaltfläche auf {display: none} Zu setzen.

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

Ich habe das auf einem anderen Post gefunden, hoffe es hilft, es hat bei mir funktioniert:

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

Das ist die Verbindung:

So entfernen Sie die Schaltfläche zum Schließen im Dialogfeld "jQuery-Benutzeroberfläche"?

60
foxvor

Wenn es sich bei Ihrem Dialogfeld um ein reguläres Popup-Fenster handelt, kann der Benutzer nicht daran gehindert werden, das Fenster zu schließen.

Sie können ein modales jQuery-Dialog-Plugin verwenden, z. B. jqModal .

Beachten Sie jedoch, dass Sie den Benutzer auch nicht daran hindern können, das Hauptfenster zu schließen.


[~ # ~] edit [~ # ~] : Wenn Sie das Dialogfeld "jQuery-Benutzeroberfläche" verwenden, können Sie die folgende CSS-Regel hinzufügen:

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

Sie sollten auch closeOnEscape auf false setzen.


Warum zwingen Sie den Benutzer, auf I Agree Zu klicken?
Warum können Sie ein geschlossenes Fenster nicht so behandeln, als wären Sie anderer Meinung?

13
SLaks

Nur eine Ergänzung zu Michael Meadows Antwort. Wenn Sie mehrere Formulare haben und die Variable nicht global haben möchten, können Sie dem Formular-DOM-Element einfach ein Attribut hinzufügen. Etwas wie :

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

Ich denke, man muss mit 'true' vergleichen und nicht nur true, da ich denke, dass attr als String gespeichert sind. aber da bin ich mir nicht sicher ....

3
Alexandre

Ich füge hinzu, es gab ein verwandtes Problem: Führen Sie einen Neustart durch, nachdem der Benutzer auf das X geklickt hat, um in einem bestimmten Dialogfeld zu schließen. In anderen Fenstern wurde kein Neustart durchgeführt. Ich habe die jQuery-Dialogfunktion in .js hinzugefügt:

.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})

Dadurch wird nach dem Titel im Bereichstext gesucht und beim Schließen erneut geladen, andernfalls wird das Fenster ohne erneutes Laden geschlossen.

3
netefficacy

Es wurde festgestellt, dass das für die Titelleiste des Dialogfelds erstellte div ein Attribut aria-labelledby hat, das auf Ihren Dialog verweist (ui-dialog-title- {yourDialogName}). Daher habe ich nur das "x" mit dem folgenden CSS ausgeblendet:

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

Ich habe closeOnEscape auch auf false gesetzt, um dies zu verhindern.

3
Jeff

In Bezug auf Ihre Aufgabe, dem Benutzer das Klicken auf das X zu verweigern, würde ich einen der folgenden Ansätze empfehlen:

  1. verwenden Sie eine CSS-Regel, um die Anzeige für diese Schaltfläche auf "Keine" zu setzen. Wenn Sie den Inspect-Modus von Firebug verwenden, sollten Sie in der Lage sein, das Tag zu überprüfen, das das Dialogfeld der jQuery-Benutzeroberfläche dort platziert, und eine CSS-Regel dafür hinzuzufügen. Wenn es keine Anzeige gibt, sollte der Benutzer nicht in der Lage sein, darauf zu klicken.
  2. Hängen Sie auf ähnliche Weise ein jQuery .click () -Ereignis an, das nichts bewirkt, und geben Sie false zurück, um die Ereignisweitergabe zu stoppen (ich habe dieses Ereignis noch nie durchgeführt, aber es sollte funktionieren).
  3. Sie können dem beforeClose () -Ereignis des Dialogfelds eine Funktion hinzufügen, mit der Sie verhindern können, dass das Dialogfeld geschlossen wird, wenn der Benutzer nicht auf "Ich stimme zu" geklickt hat.
  4. Am kompliziertesten, aber nützlich, wenn Sie ähnliche Dialogfelder verwenden oder andere funktionale Änderungen vornehmen möchten, können Sie das jQuery-UI-Dialogfeld in Unterklassen unterteilen, indem Sie ein jQuery-UI-Plugin erstellen, das das Dialogfeld intern instanziiert und dann das Standardverhalten durch Anwenden von CSS-Regeln oder Anhängen von Ereignissen ändert wie oben beschrieben.

Hoffe, einer davon bringt dich in die richtige Richtung ...

3
bprotas

Wenn Sie alert verwenden, sollten Sie stattdessen confirm in Betracht ziehen:

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

Oder benutze ein Plugin wie SLaks erwähnt

1
nickf