TLDR

Question

我正在制作一个引导程序网站，其中包含几个Bootstrap'Modals'。我正在尝试自定义一些默认功能。

问题是这样的; 您可以通过单击背景关闭模态。无论如何禁用此功能？仅限于特定模态？

Answer 1

在选项章节中，在您链接的页面中，您可以看到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>`

Answer 2

您可以使用以下属性：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

Answer 3

这是最简单的

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

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

Answer 4

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

XXX-macbook-pro-2:XXX XXX$ ntpq -pcrv
     remote           refid      st t when poll reach   delay   offset  jitter
==============================================================================
 ntp.your.org    .INIT.          16 u    -   64    0    0.000    0.000   0.000
associd=0 status=c012 leap_alarm, sync_unspec, 1 event, freq_set,
version="ntpd 4.2.6@1.2089-o Fri May 28 01:20:53 UTC 2010 (1)",
processor="x86_64", system="Darwin/15.2.0", leap=11, stratum=16,
precision=-20, rootdelay=0.000, rootdisp=0.075, refid=INIT,
reftime=00000000.00000000  Mon, Jan  1 1900  0:09:21.000,
clock=daa9468e.835891f4  Fri, Apr  1 2016 21:12:14.513, peer=0, tc=3,
mintc=3, offset=0.000, frequency=-47.221, sys_jitter=0.000,
clk_jitter=0.001, clk_wander=0.000

Answer 5

您可以使用

myString.All(c => char.IsDigit(c))

更改默认行为。

Answer 6

有两种方法可以禁用bootstrap模型区域外的click来关闭modal -

使用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.

Answer 7

Checkout This ::

＆＃13;

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});

＆＃13;

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

＆＃13;

Answer 8

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

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

背景：禁用外部点击事件

键盘：禁用了scape关键字事件

Answer 9

这个解决方案对我有用：

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

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

在按钮中启动模态

Answer 10

另一种选择，如果你不知道模态是否已经打开，你需要配置模态选项：

Bootstrap 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

Answer 11

将此CSS用于模态和模态对话框

.modal{
    pointer-events: none;
}

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

这可以解决您在Modal中的问题

Answer 12

<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”， =>数据背景=“非静态” 希望对您有帮助

Answer 13

这些解决方案中没有一个对我有用。

我有一个条款和条件模式，我想强迫人们继续阅读之前...根据这些选项的默认值“静态”和“键盘”，使得无法向下滚动页面，因为条款和条件是记录了几页，静态不是我的答案。

因此，我改为取消了模式上的click方法的绑定，通过以下操作，我能够获得所需的效果。

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

Answer 14

如果要更改默认值：

对于bootstrap 3.x：

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

对于bootstrap 4.x：

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

Answer 15

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

Answer 16

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

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

Answer 17

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

Answer 18

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

Answer 19

如果您使用的是 @ 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>

此代码已使用以下代码在9号角上进行测试：

“ @ ng-bootstrap / ng-bootstrap”：“ ^ 6.1.0”，
“ bootstrap”：“ ^ 4.4.1”，

Answer 20

尝试一下：

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

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

Answer 22

TLDR

backdrop: 'static'

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

为static指定一个背景，该背景不会在点击时关闭模式。

Answer 23

您也可以在不使用JQuery的情况下执行此操作，如下所示：

<div id="myModal">

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

Answer 24

根据您的屏幕宽度添加以下css。

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

禁用在bootstrap模态区域外单击以关闭模态

24 个答案:

TLDR