Twitter Bootstrapモーダルウィンドウが閉じないようにする

Twitterブートストラップを使用してモーダルウィンドウを作成しています。デフォルトの動作では、モーダル領域の外側をクリックすると、モーダルは自動的に閉じます。これを無効にしたいのですが、モーダルの外側をクリックしたときにモーダルウィンドウを閉じないでください。

これを行うために誰かがjQueryコードを共有できますか？

背景の値をstaticに設定したいと思います。Escキーの使用時にウィンドウが閉じないようにするには、別の値を設定する必要があります。

例：

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

またはJavaScriptを使用している場合：

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

backdropプロパティをに設定するだけ'static'です。

$('#myModal').modal({
  backdrop: 'static',
  keyboard: true
})

keyboardプロパティをに設定すると、キーボードのキーをfalse押してモーダルを閉じることができなくEscなります。

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
})

myModal モーダルコンテンツを含むdivのIDです。

これらの属性をモーダル定義自体に含めることもできます。

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

モーダルウィンドウを既に初期化している場合は、オプションを$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})にリセットして、新しいオプションが適用されることを確認してください。

DialogのBootstrap 'hide'イベントをオーバーライドし、そのデフォルトの動作を停止します（ダイアログを破棄するため）。

以下のコードスニペットをご覧ください。

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

私たちの場合は問題なく動作します。

はい、次のようにできます。

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

@AymKdnの答えに似ていますが、これにより、モーダルを再初期化せずにオプションを変更できます。

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

または、複数のオプションを実行する必要がある場合は、JavaScript withが便利です。

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

モーダルが既に開いている場合、これらのオプションは、モーダルが次に開かれたときにのみ有効になります。

これら2つを追加するだけです

data-backdrop="static" 
data-keyboard="false"

こんな感じになります

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

それはエスケープボタンを無効にし、どこでもクリックして非表示にします。

このJavaScriptをページに追加することで、バックグラウンドのクリックして閉じる動作を無効にし、これをすべてのモーダルのデフォルトにすることができます（jQueryおよびBootstrap JSがロードされた後に実行されることを確認してください）。

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

D3VELOPERが言うように、次のコードはそれを解決します：

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

私はjqueryとブートストラップの両方を使用removeData('modal')していますが、機能しません。

私が見つけた最高のものは、このコードをリンクに追加することです

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

誰かがモーダルを閉じるのを防ぐ方法を見つけようとしているGoogleからここに来た場合、削除する必要があるモーダルの右上に閉じるボタンもあることを忘れないでください。

私はそれを隠すためにいくつかのCSSを使用しました：

#Modal .modal-header button.close {
    visibility: hidden;
}

「display：none;」を使用することに注意してください。モーダルが作成されると上書きされるため、使用しないでください。

条件付きで機能を無効にする場合backdrop click closing。次の行を使用して、backdropオプションをstatic実行時ににます。

ブートストラップv3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

ブートストラップv2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

これにより、backdropオプションが設定されているインスタンス化済みのモデルが回避されます。false（デフォルトの動作）に閉じないようにします。

以下のコード行を使用して、モーダルポップアップのデフォルトの動作を設定できます。

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

それをすることは今日非常に簡単です。追加するだけです：

data-backdrop="static" data-keyboard="false" 

モーダルディバイダー内。

まあ、これはあなたたちの何人かが探しているかもしれない別の解決策です（私がそうだったように....）

私の問題も同様で、内部にあるiframeの読み込み中にモーダルボックスが閉じていたため、iframeの読み込みが完了するまでモーダルの表示を無効にし、再度有効にする必要がありました。

ここで紹介するソリューションは100％機能していませんでした。

私の解決策はこれでした：

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

だから私は一時的にモーダルが閉じるのを防ぎます：

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

しかし、iframeが読み込まれた後に閉じることを再び有効にするvar is_loadingです。

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

モーダルが表示された後にBootstrap 4.1.3の背景状態を更新するには、Bootstrap-Modal-Wrapperプラグインから次の行を使用しました。プラグインリポジトリコードリファレンス。

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");