38

BootstrapModalを使用しています。私はそれを宣言し、私はそれを呼び、私はそれを示します...すべてが大丈夫のようです。

しかし、以前に「keyboard」プロパティがfalseで表示されていた既存のモーダルがあり、外出先で変更したい場合はどうなりますか？私は次のような意味です：

まず、これを行うモーダルを作成します（ご覧のとおり、モーダルパッティングキーボードのプロパティをfalseに宣言します）。

$('#myModal').modal({
    show: false,
    backdrop: true,
    keyboard: false
});

しかし、次にこのイベントハンドラーを宣言します。つまり、「何か」が発生した場合は、キーボードのプロパティをtrueに設定する必要があります。

 $('#myModal').on('shown', function(e) {
    if (something){
        $('#myModal').modal({keyboard: true});
    }
 }

だから、私が行くとき

$("#myModal").show();

Escキーを押すとモーダルを閉じることができないため、イベントハンドラーは想定どおりに動作していません。しかし、私は「何か」が真実であると完全に確信しており、$('#myModal').modal({keyboard: true})実行されたものをチェックして再チェックしました。

これが構成オプションの値を更新しない理由についての手がかりはありますか？

4

8 に答える 8

50

Modalなどのすでに開始されているBootstrapプラグインの構成設定を変更するには、要素にアタッチされているプラ​​グインオブジェクトにアクセスし、その中に$('#pluginElement').data['somePlugin']設定する必要がありますoptions。

モーダルの場合、次のものが必要です。

$('#myModal').data('modal').options.keyboard = true;

JSFiddleデモ（旧）

Bootstrap 3（@Geraldによるコメントで言及されている）の場合、次のものが必要ですbs.modal。

$('#myModal').data('bs.modal').options.keyboard = true;

モーダルの例を待っています

于 2012-08-04T18:55:41.607 に答える
22

OPの範囲を少し超えていますが、これは2回同じ解決策を検索し（私の記憶はがらくたです）、2回この質問に出くわし、最終的な答えにつながりました。私の問題は、すでに初期化されて表示されている「閉じることができる」モーダルを「閉じることができない」モデルにする方法でした。他のユーザーがこの回答を必要とすることはまれですが、受け入れられた回答に基づいて私が行ったことは次のとおりです。

*使用されるbootstrap3

$('#modal').off('keyup.dismiss.bs.modal'); // disable escape key
$('#modal').data('bs.modal').options.backdrop = 'static';
$('#modal button.close').hide();

上記のように、options.keyboardプロパティをfalseに変更しなかったことに注意してください（その後、escape（）を呼び出します）。それを機能させることができなかったので、Bootstrapソースを調べた後、「keyup.dismiss.bs.modal」のイベントリスナーを削除するだけであることがわかりました。

物事を再度有効にするには（私のシナリオでは、モデルが非表示になっている場合）：

$('#modal').on('hidden.bs.modal', function (e) {
    $(this).data('bs.modal').escape(); // reset keyboard
    $(this).data('bs.modal').options.backdrop = true;
    $('button.close', $(this)).show();
});

これは完全に不器用なようで、Bootstrapの今後のバージョンでは確実に機能しなくなりますが、今のところは機能します...

乾杯 ：）

于 2013-12-18T02:11:59.280 に答える
10

bootstrap4の場合

エスケープボタンでモーダルを閉じるを無効にするには：

$('#myModal').off('keydown.dismiss.bs.modal');

背景をクリックしてモーダルを閉じるを無効にするには：

$('#myModal').data('bs.modal')._config.keyboard = false;

夜行性によって警告されたように、これはブートストラップの将来のバージョンで壊れる可能性があります。

于 2018-03-13T02:19:41.667 に答える
4

Bootstrap4.1の場合

optionsプロパティはに置き換える必要があります_config。

例えば

const modal = $('#modal');

/*
 |------------------------------------------------------------------------------
 | Now, let us assume you already opened the modal (via js or data attribute).
 | If you want to access the options and modify.
 |------------------------------------------------------------------------------
 */

// [Not Required] Let us see what the object is like.
console.log( modal.data('bs.modal')._config );

// Override the options to lock modal.
modal.data('bs.modal')._config.backdrop = 'static';
modal.data('bs.modal')._config.keyboard = false;

// [optional] You can also hide all data-dismiss buttons too.
modal.find("[data-dismiss='modal']").hide();

// Revert all actions above.
modal.data('bs.modal')._config.backdrop = true;
modal.data('bs.modal')._config.keyboard = true;
modal.find("[data-dismiss='modal']").show();
于 2020-08-20T06:33:05.997 に答える
3

モーダルがすでに開いているときにモーダルを閉じないように背景とesckeyを設定する

$('div[name="modal"]').data('bs.modal').options.backdrop = 'static';
$('div[name="modal"]').off('keydown.dismiss.bs.modal');

モーダルを閉じないように、背景とキーescの目的を設定解除します

$('div[name="user_profile_modal"]').data('bs.modal').options.backdrop = true;
$('div[name="user_profile_modal"]').data('bs.modal').escape();
于 2018-10-19T15:53:36.767 に答える
2

HTMLタグに属性を追加することもできます：data-keyboard = "false"

<div id="myModal" class="modal hide fade" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

わたしにはできる！

于 2013-03-22T16:08:43.820 に答える
1

モーダルがすでに開かれているかどうかがわからず、モーダルオプションを構成する必要がある場合の別のオプション（ブートストラップ3）：

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

ありがとう@nokturnal

于 2018-02-24T03:24:21.420 に答える
0

私にとって、この方法は最も効果的です

$('#modal').on('hide.bs.modal', function () {
    return false;
});

考えられるシナリオによってモーダルが閉じるのを防ぎます。

  • エスケープキーを押す
  • モーダルの外側をクリックする
  • [閉じる]ボタンをクリックします
  • そしての使用さえ$('#modal').modal('hide')
于 2021-07-03T17:43:56.023 に答える