web-dev-qa-db-ja.com

ダイアログの右上にある「X」ボタンを無効にします

可能性のある複製：
jQueryUIダイアログの閉じるボタンを削除しますか？

続行する前にユーザーが条件に同意する必要があるダイアログを作成しようとしていますが、ユーザーがダイアログの右上隅にある「X」をクリックして閉じることを許可したくありません。ユーザーが[同意する]をクリックするよう要求します。

ダイアログで「X」を無効にする方法はありますか？

明確化：私は標準のjQuery UIダイアログ$ .dialog（）を使用しています。

jqueryjquery-uidialogjquery-ui-dialog
40
BAHDev

JQuery UIを使用していると仮定しています。

その場合は、beforeCloseイベントハンドラをアタッチし、[同意する]ボタンがクリックされていない場合はfalseを返します。 CSSを使用してXボタンを{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

私は別の投稿でこれを見つけました、それが役立つことを願っています、それは私のために働いた：

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

これはリンクです：

jQuery UIダイアログの閉じるボタンを削除する方法

60
foxvor

ダイアログが通常のポップアップウィンドウである場合、ユーザーがウィンドウを閉じるのを防ぐことはできません。

jqModal などのjQueryモーダルダイアログプラグインを使用できます。

ただし、ユーザーがメインウィンドウを閉じるのを防ぐことはできません。

[〜＃〜] edit [〜＃〜]：jQuery UIダイアログを使用している場合、次のCSSルールを追加できます。

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

closeOnEscapeもfalseに設定する必要があります。

また、なぜあなたはユーザーにI Agreeをクリックするように強制するのですか？
閉じたウィンドウを、あなたが同意しないかのように扱うことができないのはなぜですか？

13
SLaks

マイケルメドウズの答えを補足するだけです。複数のフォームがあり、変数をグローバルにしたくない場合は、フォームのDOM要素に属性を追加するだけです。何かのようなもの ：

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

Attrは文字列として保存されていると思うので、trueだけでなく 'true'と比較する必要があると思います。でもそれについてはわかりません。

3
Alexandre

さらに、関連する問題がありました。ユーザーが特定のダイアログウィンドウでXをクリックして閉じた後にリロードを実行し、他のウィンドウではリロードしません。 .jsのjQueryダイアログ関数に追加しました：

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

これは、スパンテキストでタイトルを探し、終了時にリロードします。それ以外の場合は、リロードなしでクローズします。

3
netefficacy

ダイアログのタイトルバー用に作成されたdivには、ダイアログ（ui-dialog-title- {yourDialogName}）を参照するaria-labelledby属性があるため、次のCSSで「x」を非表示にしたことに注意してください。

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

それを防ぐため、closeOnEscapeをfalseに設定します。

3
Jeff

ユーザーがXをクリックすることを許可しないというタスクに関しては、いくつかの方法のいずれかをお勧めします。

  1. cSSルールを使用して、そのボタンの表示を「なし」に設定します。 Firebugの検査モードを使用すると、jQuery UIダイアログがそこに配置するタグを確認し、CSSルールを追加できるはずです。表示されていない場合、ユーザーはクリックできません。
  2. 同様に、何もせずfalseを返すjQuery .click（）イベントをアタッチして、イベントの伝播を停止します（実際にこれを行ったことはありませんが、動作するはずです）。
  3. ダイアログのbeforeClose（）イベントに関数をアタッチすると、ユーザーが「同意する」をクリックしなかった場合にダイアログが閉じるのを防ぐことができます。
  4. 最も複雑ですが、同様のダイアログまたは他の機能変更を行う場合に便利です。ダイアログを内部的にインスタンス化するjQuery UIプラグインを作成してjQuery UIダイアログをサブクラス化し、CSSルールを適用するかイベントを添付することでデフォルトの動作を変更できます上記のように。

それらのいずれかがあなたを正しい方向に導くことを願っています...

3
bprotas

alertを使用している場合は、代わりにconfirmを検討する必要があります。

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

または、SLaksのように プラグイン を使用します

1
nickf