我正在做一个bootstrap网站，与一对bootstrap 'Modals'。 我正在尝试自定义一些默认功能。
问题在于; 你可以通过点击背景来关闭模式。 有没有办法禁用这个功能? 只在特定的情态动词?
引导模态页面
当前回答
根据你想要的屏幕宽度添加下面的css。
@media (min-width: 991px){
.modal-dialog {
margin: 0px 179px !important;
}
}
其他回答
你可以像这样使用一个属性:data- background ="static"或者使用javascript:
$('#myModal').modal({
backdrop: 'static',
keyboard: false // to prevent closing with Esc button (if you want this too)
})
也可以看到这个答案:禁止twitter引导模式窗口关闭
在Options一章中，在您链接的页面中，您可以看到背景选项。通过这个值为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>`
如果你正在使用@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”:1 ^ 6。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');
});
});
根据你想要的屏幕宽度添加下面的css。
@media (min-width: 991px){
.modal-dialog {
margin: 0px 179px !important;
}
}
