web-dev-qa-db-ja.com

Bootstrapモーダルオプションが既に存在する場合に変更する

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

しかし、「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();
_

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

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

javascriptjqueryjquery-pluginstwitter-bootstrapmodal-dialog
35
ElPiter

既に開始されているBootstrapプラグイン（モーダルなど）の構成設定を変更するには、$('#pluginElement').data['somePlugin']などの要素にアタッチされたプラグインオブジェクトにアクセスし、optionsをそれ。

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

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

JSFiddleデモ（旧）

Bootstrap 3（@Geraldによるコメントで言及されているように）の場合、bs.modal：

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

待機モーダルの例

47
merv

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の今後のバージョンでは確実に機能しなくなりますが、今のところ機能します...

乾杯:)

22
nokturnal

bootstrap4の場合

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

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

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

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

夜行性によって警告されたように、これはブートストラップの将来のバージョンで壊れるかもしれません。

9
user3563059

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>

わたしにはできる！

2
user2199629

モーダルが既に開いているときにモーダルを閉じないように背景と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();
2
Zeng Xin Reiner Cheung

モーダルが既に開かれているかどうかがわからず、モーダルオプションを構成する必要がある場合の別のオプション（ブートストラップ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

1
Cava