Question

我有一个使用2个bootstrap模态组件的角度项目。第一个模式是表单，而另一个模式只是确认用户是否要退出表单。我分叉了一个类似于我的问题的plunker。我想要的是当用户点击模态外时阻止第二个模型关闭。我已经尝试将这个“data-backdrop =”static“data-keyboard =”false“”添加到第二个模态但它不起作用。

<popup #modal1 data-backdrop="static" data-keyboard="false">
<div class="popup-header">
  Form
</div>
<div class="popup-body">
  Name
  <input type="text">
</div>
<div class="popup-footer">
  <button type="button" class="btn btn-default" (click)="modal2.show()">Close</button>
    <button type="button" class="btn btn-primary">Save</button>
</div>

<popup #modal2  data-backdrop="static" data-keyboard="false">
<div class="popup-header">
  Warning
</div>
<div class="popup-body">
  Are you sure you want to exit
</div>
<div class="popup-footer">
  <button type="button" class="btn btn-default" (click)="modal2.hide()">Cancel</button>
  <button type="button" class="btn btn-primary" (click)="modal2.hide() ; modal1.hide()">Close</button>
</div>

这是傻瓜。 https://plnkr.co/edit/hIinDea4XNVeJEkXTixW?p=preview

Answer 1

这是一个吸虫：https://plnkr.co/edit/U8gRRF9S2qZfzGUasFEK

使用Angular中的HostListener从主机
使用输入参数配置模型

考虑使用ng2-boostrap库

第二个模型：

 void CustomersGridView_RowDataBound(Object sender, GridViewRowEventArgs e)
  {

    if(e.Row.RowType == DataControlRowType.DataRow)
    {

      //GET THE BUTTON.
      Button button1 = (Button)e.Row.FindControl("btn_agregar");

      //CHECK CONDITION AND SHOW/HIDE ACCORDINGLY.
      if (YOUR CONDITION)
         button1.Visible = true; 
      else
         button1..Visible = false; 

    }
 }

对于模态组件

：

<popup #modal2 [isStatic]="'true'">

Answer 2

您必须导入模态j才能使其正常工作。你的plunker只导入了CSS。

我建议你改用另一个控件。以下是拦截隐藏事件的方法。

$('#myModal').on('hide.bs.modal',function(e){
    if (...) { // put your own logic here.
        e.preventDefault(); // prevent modal from being closed.
    }
}).modal();

或使用背景：

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

在Angular 2中使用嵌套引导模式。如何在外部单击时阻止Bootstrap Modal消失

2 个答案: