Question

我是anguar4的新手。我在我的项目中使用bootstrap模式。单击模态外部时，模态将隐藏。这是我的代码

//在html中

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

//在ts代码中

@ViewChild('noticeModal') public noticeModal: ModalDirective;

ngAfterViewInit() {
   this.noticeModal.show();
};

Answer 1

请在html中添加此配置。希望它能帮到你解决问题。

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    [config]="{backdrop: 'static',  keyboard: false}" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

Answer 2

下面的解决方案为我工作，方法是在调用模式-> {backdrop: 'static', keyboard: false}；

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

它对我有用，而无需将bsModal添加到<div>或任何指令模块中。

更清晰的解决方案，如下所示： HTML：

 <div #crudModal class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
      </div>
      <div class="modal-body">        
      </div>
      <div class="modal-footer">       
      </div>
    </div>
  </div>
</div>

在.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@ViewChild('crudModal') crudModal: ElementRef;

openModal() {
    $(this.crudModal.nativeElement).modal({backdrop: 'static', keyboard: false});
}

希望有帮助。

Answer 3

btw ，如果您将通过 BsModalService 对bsModal使用组件方法，则您可以简单地设置：ignoreBackdropClick = false（忽略背景幕点击）如Angular Bootstrap API参考中所述

your.component.ts

constructor(private bsModalService: BsModalService) {}

const bsModal = this.bsModalService.show(YourModalComponent, {
    class: 'modal-dialog-centered modal-md',
    ignoreBackdropClick: true
});

P.S。最好使用这种方法，而不是在HTML模板内部使用。考虑可重用性；）

Answer 4

如果您使用按钮打开弹出窗口，请在按钮上使用以下配置，

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

Answer 5

使用here文档中列出的--------------------------------------------------------------------------- ValueError Traceback (most recent call last) <ipython-input-569-dc7a52b74c19> in <module> 1 s = 6 2 l = 7 ----> 3 a = f'{s:0%b}' %l 4 print(a) ValueError: Invalid format specifier选项

禁用bootstrap模态区域外的单击事件以关闭角度4中的模态

5 个答案: