ブートストラップモーダル領域の外側のクリックを無効にして、モーダルを閉じます


440

ブートストラップ「モーダル」をいくつか使用して、ブートストラップのウェブサイトを作成しています。一部のデフォルト機能をカスタマイズしようとしています。

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

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


この状況で呼び出されるイベントを教えてください。$ scope.ok、$ scope。$ dismiss送信と中止の実装がありますが、この状況で発生したイベントがわかりません。
LoveToCode 2016年

回答:


911

オプションの章のリンクしたページで、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>`

バックグラウンドで他のコントロールのクリックを登録できるようにする方法はありますが、モーダルを閉じないだけですか?
2015年

2
@mystikacidそのために新しい質問をする必要があります。あなたの問題と同様の解決策を探している他のユーザーを支援する方が良いでしょう。
Doguita、2015年


3
単純だが苛立たしい問題があった場合は、jquery行を前に配置して、$('#modal').modal('show');これが役立つことを願ってください!
cwiggo '14年

3
モーダルを使用しないcwiggo $( '#modal')。modal( 'show'); -.modal({backdrop: 'static'、keyboard:false})を使用するだけ-表示または切り替えコマンドなし
TV-C-15

135

これが一番簡単です

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

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

2
これは私のために働いた唯一のものです。JSでオプションを直接渡しても、何らかの理由でバージョン33.7で動作しませんでした。他の誰かが裏付けをしている場合、Bootstrapチームに問題が発生する可能性があります。
dchacke 2017

最初は、モーダルを開いた後にすべてを設定していたため、jsバージョンを使用してもうまくいきませんでした。これを行う必要があります "$( '#modalForm')。modal({backdrop: 'static'、keyboard:false});" この「$( '#modalForm')。modal( 'show');」の前。しかし、私にとって最良の答えは@ಅನಿಲ್からです
Lucas

これでうまくいきました。置くdata-backdrop="static"モーダルな定義ではなく、私のために働いた他の回答で指定されたモーダルを開くトリガーボタン、上のオプションを選択します。
TSmith

99

次のような属性を使用できます:data-backdrop="static"またはjavascript:

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

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


<div id = "modal" class = "modal hide fade in" data-keyboard = "false" data-backdrop = "static">これが最良の答えです。
Kamlesh

34

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

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

このコードはモーダルが開いているときにのみ機能するため、これは良い答えです。
Deepak Dholiyan

32

使用できます

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

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


すべてのモーダルの状況に対応できるため、正解です。
Haris ur Rehman 2017

1
ブートストラップv4では、構文は次のとおりです。$ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
Garry English

11

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

  1. JavaScriptを使用

    $('#myModal').modal({
       backdrop: 'static',
       keyboard: false
    });
  2. HTMLタグでのデータ属性の使用

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

9

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

$(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

モーダルがすでに開かれているかどうかが不明で、モーダルオプションを構成する必要がある場合の別のオプション:

ブートストラップ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
    }
}

Bootstrap 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に変更します


Bootstrap 4 +の場合は、_setEscapeEvent()代わりにすべき.escape()ですか?
Ivan Bacher

@IvanBacherは.escape()を使用して機能します
Cava

5

私のために働く解決策は次のとおりです:

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

背景:Click Outsideイベントを無効にしました

キーボード:scapeキーワードイベントを無効化


4
<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"

これがあなたに役立つことを願っています!



1

これらの解決策はどれも私にとってうまくいきませんでした。

続行する前にユーザーに確認を強制したい契約条件モーダルがあります...オプションごとのデフォルトの「静的」および「キーボード」により、契約条件が数ページなので、ページを下にスクロールできませんでした。ログ、静的は私にとって答えではありませんでした。

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

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



0
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

あなたが使用している場合は、@ NG-ブートストラップの使用を以下:

成分

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {

  constructor(
    private ngbModal: NgbModal
  ) {}

  ngOnInit(): void {
  }

  openModal(exampleModal: any, $event: any) {
    this.ngbModal.open(exampleModal, {
      size: 'lg', // set modal size
      backdrop: 'static', // disable modal from closing on click outside
      keyboard: false, // disable modal closing by keyboard esc
    });
  }
}

テンプレート

<div (click)="openModal(exampleModal, $event)"> </div>
    <ng-template #exampleModal let-modal>
        <div class="modal-header">
            <h5 class="modal-title">Test modal</h5>
        </div>
        <div class="modal-body p-3">
            <form action="">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Test field 1</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">Test field 2</label>
                        <input type="text" class="form-control">
                    </div>

                    <div class="text-right pt-4">
                        <button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button>
                        <button class="btn btn-primary ml-1">Save</button>
                    </div>
            </form>
        </div>
    </ng-template>

このコードは、角度9で以下を使用してテストされました。

  1. "@ ng-bootstrap / ng-bootstrap": "^ 6.1.0"、

  2. "ブートストラップ": "^ 4.4.1"、


0

jQueryを使用するすべてのモーダルの外部クリックを無効にする場合は、これを使用します。このスクリプトをjQueryの後にJavascriptに追加します。

jQuery(document).ready(function () {
    jQuery('[data-toggle="modal"]').each(function () {
       jQuery(this).attr('data-backdrop','static');
       jQuery(this).attr('data-keyboard','false');
    });
});

-1

次のように、JQueryを使用せずにこれを行うこともできます。

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;

-2

画面の幅に合わせて、以下のcssを追加します。

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.