41

重複の可能性:
jQueryUI ダイアログの閉じるボタンを削除しますか?

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

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

明確化:標準の jQuery UI ダイアログ $.dialog() を使用しているだけです。

4

8 に答える 8

60

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

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

これはリンクです：

jQuery UIダイアログの閉じるボタンを削除するにはどうすればよいですか？

于 2011-10-27T18:54:56.933 に答える
41

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;
    }
});
于 2010-01-11T15:34:12.817 に答える
13

ダイアログが通常のポップアップ ウィンドウの場合、ユーザーがウィンドウを閉じないようにすることはできません。

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

ただし、ユーザーがメイン ウィンドウを閉じないようにすることもできないことに注意してください。

編集: jQuery UI ダイアログを使用している場合は、次の CSS ルールを追加できます。

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

closeOnEscapeまた、を に設定する必要がありfalseます。

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

于 2010-01-11T15:22:06.087 に答える
3

Michael Meadows の回答を補足するだけです。複数のフォームがあり、変数をグローバルにしたくない場合は、フォームの 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」と比較する必要があると思います。しかし、私はそれについて確信が持てません....

于 2011-04-14T19:11:27.367 に答える
3

ダイアログのタイトルバー用に作成された 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 に設定しました。

于 2010-09-19T05:23:24.917 に答える
3

ユーザーが X をクリックすることを禁止するタスクに関しては、いくつかのアプローチのいずれかをお勧めします。

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

それらの1つが正しい方向に進むことを願っています...

于 2010-01-11T15:32:52.773 に答える
3

関連する問題があったことを追加します。ユーザーが 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})

これは、スパン テキストでタイトルを探し、閉じるときにリロードします。それ以外の場合は、リロードせずに閉じます。

于 2011-01-31T17:14:41.567 に答える
1

を使用している場合は、代わりに次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 のようなプラグインを使用します

于 2010-01-11T15:24:29.313 に答える