我正在做一个bootstrap网站,与一对bootstrap 'Modals'。 我正在尝试自定义一些默认功能。
问题在于; 你可以通过点击背景来关闭模式。 有没有办法禁用这个功能? 只在特定的情态动词?
引导模态页面
我正在做一个bootstrap网站,与一对bootstrap 'Modals'。 我正在尝试自定义一些默认功能。
问题在于; 你可以通过点击背景来关闭模式。 有没有办法禁用这个功能? 只在特定的情态动词?
引导模态页面
当前回答
如果你正在使用@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”,
其他回答
<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- background ="非静态"
希望这对你有所帮助!
你也可以不使用JQuery做到这一点,如下所示:
<div id="myModal">
var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
这些方法对我来说都没用。
我有一个条款和条件模式,我想强迫人们在继续之前审查…默认的“静态”和“键盘”选项使它不可能向下滚动页面,因为条款和条件是几页日志,静态不是我的答案。
因此,我去解除模式上的点击方法的绑定,与以下我能够得到想要的效果。
$('.modal').off('click');
把这段代码放在modal html的第一个块中
引导4.倍
-keyboard = "和"日期-backdrop =“静态”
Boostrap 5.倍
data-bs-keyboard = " false " data-bs-backdrop =“静态”
例子:
<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
包括一个情态背景元素。或者,为背景指定静态,它不会在单击时关闭模式。
如果你正在使用@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”,