web-dev-qa-db-ja.com

モーダルを閉じるには、ブートストラップのモーダルエリアの外側をクリックしないでください。

私はいくつかのBootstrap 'Modals'で、Bootstrapウェブサイトを作っています。私はいくつかのデフォルト機能をカスタマイズしようとしています。

問題はこれです。背景をクリックしてモーダルを閉じることができます。この機能を無効にする方法はありますか？特定のモーダルのみ？

ブートストラップモーダルページ

javascriptcsstwitter-bootstrapmodal-dialog
338
Egghead

リンクしているページのオプションの章で、backdropオプションを見ることができます。このオプションを値'static'で渡すと、モーダルが閉じられなくなります。
@PedroVagnerがコメントを指摘したように、を押してモーダルを閉じないようにするために{keyboard: false}を渡すこともできます。 Esc。

Jsを使ってモーダルを開くと、

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

データ属性を使用している場合は、次のように使用します。

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
755
Doguita

このような属性を使用することができます：data-backdrop="static"またはjavascriptと共に：

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

この回答も参照してください。 Twitterのブートストラップモーダルウィンドウを閉じないようにする

95
Antonis Grigoriadis

これは最も簡単なものです

モーダル動作を定義したり、データキーボードとデータ背景を定義したりできます。

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
86
Sushan

私のアプリケーションでは、jQueryを介してBootstrapモーダルを表示するために以下のコードを使用しています。

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
31
ಅನಿಲ್

あなたが使用することができます

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

デフォルトの動作を変更します。

26
David Navarro Astudillo

モーダルを閉じるためにブートストラップモデル領域の外側をクリックしないようにするには2つの方法があります。

  1. javascriptを使う 

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

  2. HTMLタグでdata属性を使う 

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
7
Gaurav Tripathi

これをチェックアウト::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>
6
Sachin Sanchaniya

私のために働く解決策は以下の通りです：

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

背景：外部のクリックイベントを無効にしました

キーボード：scapeキーワードイベントを無効にしました

3
Jorge Santos Neill

モーダルがすでに開かれているかどうかわからず、モーダルオプションを設定する必要がある場合、別の選択肢があります。

ブートストラップ3.4

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
    }
}

ブートストラップ4.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')._config.keyboard = keyboard;
    $modal.data('bs.modal')._config.backdrop = backdrop;

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

オプションを_configに変更

2
Cava

これを試して：

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
0
Vijay Chauhan
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

これを試してみて、アプリケーション開発中に...モデル属性のデフォルト値=> data-keyboard = "true"、=> data-backdrop = "non static"があなたの助けになることを願っています

0
Deepalakshmi

TLDR

backdrop: 'static'

https://getbootstrap.com/docs/3.3/javascript/#modals-options

クリック時にモーダルを閉じない背景にstaticを指定します。

0
Geoffrey Hale

これらのソリューションはどれも私にとってはうまくいきませんでした。

続行する前に人々にレビューを強制したい条件モードがあります...オプションによるデフォルトの「静的」と「キーボード」は、条件が数ページであるためページをスクロールダウンすることを不可能にしましたログ、静的は私のための答えではありませんでした。

代わりに、モーダルのクリックメソッドのバインドを解除し、次のようにして目的の効果を得ることができました。

$('.modal').off('click');

0
RGB
You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal.
    jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button.
})
0
sonu pokade