小开

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

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

看看这个答案:禁止twitter引导模式窗口关闭

小开

最佳答案

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

小开

这是最简单的

你可以定义你的模式行为，定义数据键盘和数据背景。

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

小开

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

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

小开

这个::

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

小开

有两种方法禁用自举模型区域之外的点击关闭模式

# EYZ0

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

using data attribute in HTML tag

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

小开

你可以使用

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

更改默认行为。

小开

如果你不知道模式是否已经打开或者还没有打开，你需要配置模式选项，还有一个选项:

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

小开

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

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

小开

你也可以不使用JQuery做到这一点，如下所示:

<div id="myModal">


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

小开

对我来说有效的解决方法如下:

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

背景:禁用点击外部事件

键盘:禁用scape关键字事件

小开

TLDR

# EYZ0

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

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

小开

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

小开

试试这个:

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

小开

这些方法对我来说都没用。

我有一个条款和条件模式，我想强迫人们在继续之前审查…默认的“静态”和“键盘”选项使它不可能向下滚动页面，因为条款和条件是几页日志，静态不是我的答案。

因此，我去解除模式上的点击方法的绑定，与以下我能够得到想要的效果。

# EYZ0

小开

<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"， = > # EYZ0

希望这对你有所帮助!

小开

如果您正在使用@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“引导”:“^”,

小开

如果你想禁用所有使用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');
});
});

小开

如果你想更改默认值:

对于引导3.x:

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

对于bootstrap 4。X和5.x:

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

小开

我错过了modal-dialog，这就是为什么我的关闭模式不能正常工作。

小开

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

.modal{
pointer-events: none;
}


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

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

小开

这个解决方案对我很有效:

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

, # EYZ0

在按钮启动模态

小开

对于引导4.x，你可以这样做:

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

小开

把这段代码放在modal html的第一个块中

引导4.倍

# EYZ0

Boostrap 5.倍

# EYZ0

例子:

<div id="modal-user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">

文档引导5:https://getbootstrap.com/docs/5.1/components/modal/#options

包括一个情态背景元素。或者，指定static作为在点击时不关闭模式的背景。

禁用在引导模态区域外单击关闭模态

TLDR