Question

我正在使用角度4，我想在单击模型外部时不关闭模型。我正在使用以下代码：

<div id="confirmTaskDelete" class="modal fade" [config]="
{backdrop: 'static',  keyboard: false}" role="dialog" 
style="z-index:999999">
    <div class="modal-dialog modal-width">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-
dismiss="modal" aria-label="Close" #closeTaskPopUpbtn>
                    <span aria-hidden="true">×</span>
                </button>
                <h3 class="modal-title modal-title-
color">Are you sure you want to delete this task?</h3>
                <div class="text-p" style="margin-
top:53px;margin-bottom:35px;"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-
primary" id="deletebtn" data-dismiss="modal" >OK</button>
                <button type="button" class="btn btn-
primary" data-dismiss="modal" >Cancel</button>
            </div>
        </div>
    </div>
</div>

但这给了我错误：

错误：由于它不是的已知属性，因此无法绑定到“ config” 'div'。

Answer 1

您可以使用数据键盘和数据背景

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<div id="exampleModal" class="modal fade"  role="dialog" style="z-index:999999" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-width">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data- dismiss="modal" aria-label="Close" #closeTaskPopUpbtn>
                    <span aria-hidden="true" data-dismiss="modal">×</span>
                </button>
                <h3 class="modal-title modal-title-
                   color">Are you sure you want to delete this task?</h3>
                <div class="text-p" style="margin-top:53px;margin-bottom:35px;"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-
                   primary" id="deletebtn" data-dismiss="modal">OK</button>
                <button type="button" class="btn btn-
                 primary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Stackblitz 演示

Answer 2

您需要在div标签内添加指令和模板ref变量

  <div  id="confirmTaskDelete" class="modal fade"  
        bsModal #confirmTaskDelete="bs-modal" //<===========here you should be add this
        [config]="{backdrop: 'static',  keyboard: false}" 
        role="dialog" 
        style="z-index:999999">

其余的html工作正常。

在角度4中单击模型外部时如何停止引导程序模型关闭

2 个答案: