web-dev-qa-db-ja.com

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

私はTwitter Bootstrapを使ってモーダルウィンドウを作成しています。デフォルトの動作では、モーダルエリアの外側をクリックすると、モーダルは自動的に閉じます。モーダルの外側をクリックしてもモーダルウィンドウを閉じないでください。

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

jquerytwitter-bootstrapmodal-dialogmouseclick-event
523
user1296175

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

例：

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

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

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

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

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

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

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

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

309
Nirmal

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

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

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

46
AymKdn

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

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

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

       e.preventDefault();
   });

私たちの場合はうまくいきます。

33
Sam Jha

はい、あなたはこのようにすることができます：

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

@ AymKdnの答えのようなものですが、これはモーダルを再初期化せずにオプションを変更することを可能にします。

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

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

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

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

22
Chris Barr

これら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">

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

12
Vivek

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

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

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

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

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

6
Morgan RotaStabelli

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

<!-- 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>
4
user3634719

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

非表示にするためにCSSを使用しました。

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

Display：none;を使用してください。モーダルが作成されたときに上書きされるので、それを使わないでください。

2
Drew

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（ デフォルトの動作 ）に設定されたモデルが閉じられなくなります。

2
Mohd Abdul Mujib

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

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

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

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

あなたのモーダルデバイダで。

2
jfindley
<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>
1
shiva krishna

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

私の問題は同様で、私が持っていた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で。

1
miguelmpn

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

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