【问题标题】：Disable click outside of bootstrap modal area to close modal [duplicate]禁用在引导模式区域之外单击以关闭模式[重复]
【发布时间】：2018-03-07 17:28:19
【问题描述】：

我正在制作一个引导网站，其中包含几个引导“模式”。我正在尝试自定义一些默认功能。

问题是这样的；您可以通过单击背景关闭模式。无论如何要禁用此功能？仅在特定模式上？

Bootstrap modal page

【问题讨论】：

你能告诉我在这种情况下调用了哪个事件吗？ $scope.ok , $scope.$dismiss 我已经实现了提交和中止，但我不知道在这种情况下触发的事件。

标签： javascript css twitter-bootstrap modal-dialog

【解决方案1】：

在选项章节中，在您链接的页面中，您可以看到backdrop 选项。使用值 'static' 传递此选项将阻止关闭模式。
正如@PedroVagner 在 cmets 上指出的那样，您也可以通过按 Esc 传递 {keyboard: false} 以防止关闭模式。

如果你通过js打开模态框使用：

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

如果您使用数据属性，请使用：

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

【讨论】：

有没有办法让后台能够注册其他控件的点击但不能关闭模式？
@mystikacid 您应该为此提出一个新问题。最好能帮助您解决您的问题以及其他搜索类似解决方案的用户。
@Doguita：这里：stackoverflow.com/questions/33000898/…
遇到了一个简单但烦人的问题，请确保将 jquery 行放在 $('#modal').modal('show'); 之前，希望对您有所帮助！
cwiggo 你不使用模态 $('#modal').modal('show'); - 你只需使用 .modal({backdrop: 'static', keyboard: false}) - 没有任何显示或切换命令

【解决方案2】：

这是最简单的一个

您可以定义模态行为，定义数据键盘和数据背景。

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

【讨论】：

这是唯一对我有用的东西。由于某种原因，直接在 JS 中传递选项对我不起作用（版本 3.3.7）。如果其他人证实，我可能会向 Bootstrap 团队提出问题。
一开始使用js版本对我也不起作用，因为我是在打开模态后设置的。你应该这样做 "$('#modalForm').modal({ background: 'static', keyboard: false });"在此“$('#modalForm').modal('show');”之前。但对我来说，最好的答案来自@ಅನಿಲ್
这对我有用。将data-backdrop="static" 选项放在模态定义上，而不是其他答案中指定的打开模态的触发按钮，对我有用。
我只使用 data-backdrop="static" 解决了。你可以在这里看到：w3schools.com/bootstrap/…

【解决方案3】：

您可以使用这样的属性：data-backdrop="static" 或使用 javascript：

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

也看到这个答案：Disallow twitter bootstrap modal window from closing

【讨论】：

这是最佳答案。

【解决方案4】：

在我的应用程序中，我使用以下代码通过 jQuery 显示 Bootstrap 模式。

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

【讨论】：

这是一个很好的答案，因为此代码仅在模式打开时才有效。

【解决方案5】：

你可以使用

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

更改默认行为。

【讨论】：

很好的答案，因为它可以处理所有模式的情况。
在 bootstrap v4 中，语法为：$.fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
@HarisurRehman 提问者希望它在特定模式下强制执行...
@DanielWu 取决于您阅读问题的方式。

【解决方案6】：

有两种方法可以禁用在引导模型区域之外单击以关闭模式-

使用 javascript

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

在 HTML 标签中使用数据属性

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

【讨论】：

【解决方案7】：

结帐这个::

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

【讨论】：

【解决方案8】：

如果您不知道模态是否已经打开并且您需要配置模态选项的另一个选项：

引导程序 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

【讨论】：

对于 Bootstrap 4 + 应该是 _setEscapeEvent() 而不是 .escape()？
@IvanBacher 使用 .escape() 对我有用

【解决方案9】：

将此 CSS 用于 Modal 和 modal-dialog

.modal{
    pointer-events: none;
}

.modal-dialog{
    pointer-events: all;
 }

这可以解决您在模态中的问题

【讨论】：

如果您想为应用程序中的每个模式关闭它，最好的选择
但它会关闭浏览器滚动:(

【解决方案10】：

对我有用的解决方案如下：

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

背景：禁用点击外部事件

键盘：禁用 scape 关键字事件

【讨论】：

【解决方案11】：

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

希望对您有所帮助！

【讨论】：

【解决方案12】：

试试这个：

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

【讨论】：

【解决方案13】：

如果您想更改默认设置：

对于引导程序 3.x：

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

对于引导程序 4.x：

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

【讨论】：

【解决方案14】：

这个解决方案对我有用：

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

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

在按钮女巫启动模态

【讨论】：

【解决方案15】：

如果您使用的是 @ng-bootstrap，请使用以下内容：

组件

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>

此代码已在 Angular 9 上使用：

"@ng-bootstrap/ng-bootstrap": "^6.1.0",
“引导程序”：“^4.4.1”，

【讨论】：

【解决方案16】：

如果您想使用 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');
    });
});

【讨论】：

【解决方案17】：

TLDR

backdrop: 'static'

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

指定static 用于在点击时不关闭模式的背景。

【讨论】：

【解决方案18】：

这些解决方案都不适合我。

我有一个条款和条件模式，我想强制人们在继续之前进行审查......根据选项的默认“静态”和“键盘”使得无法向下滚动页面，因为条款和条件是几页日志，静态不是我的答案。

所以我改为取消绑定模式上的点击方法，以下我能够获得所需的效果。

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

【讨论】：

【解决方案19】：

对于 Bootstrap 4.x，你可以这样做：

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

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的回答添加解释并说明适用的限制和假设。
另外，除了现有答案之外，请让您的答案所贡献的额外见解更加明显，例如@MoinUddin 的答案

【解决方案20】：

data-keyboard="false" data-backdrop="static" 在您的 html 代码中用于模态框 div 的开始

【讨论】：

请添加一些解释。为什么您认为您提出的解决方案可能对 OP 有所帮助。

【解决方案21】：

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

【讨论】：

【解决方案22】：

我错过了modal-dialog，这就是我的关闭模式无法正常工作的原因。

【讨论】：

【解决方案23】：

您也可以不使用 JQuery 来执行此操作，如下所示：

<div id="myModal">

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

【讨论】：

【解决方案24】：

根据你想要的屏幕宽度添加下面的 css。

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}

【讨论】：