更新

Question

我想在模态窗口中单击关闭按钮时触发事件。该按钮具有属性click，并且不会调用click事件。是否可以从类中获取数据关闭和click事件或仅<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" (click)="close()">×</button> <h4 class="modal-title">{{modalHeader}}</h4> </div> </div> </div> close() { //Can I close modal window manually? this.onClose.emit(); }事件和关闭模式？

close

方法data-dismiss不要调用，因为按钮具有Spinner mySpinner1 = (Spinner) findViewById(R.id.spinner1); ArrayAdapter<String> myAdapter1 = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.which)); myAdapter1.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); mySpinner1.setAdapter(myAdapter1); mySpinner1.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<?> arg0, View view, int position, long id) { Intent intent = new Intent(MainActivity.this, intent.class); switch (position) { case 1: intent = new Intent(MainActivity.this, MainActivity2.class); break; } startActivity(intent); }属性。

谢谢

Answer 1

您不能拥有data-dismiss="modal"并调用函数，而是在close函数内执行以下操作：

close() {
    $('.modal').modal('hide');
}

我假设你正在使用bootstrap，所以你正在使用jQuery。

Answer 2

在你close函数中添加此

close() {
    $("#myModal").modal("hide");
}

Answer 3

在角度中，使用[hidden]属性显示/隐藏模型弹出窗口，然后在关闭按钮中删除data-dismiss="modal"

试试这个

<div [hidden]="IsmodelShow" class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="close()">&times;</button>
        <h4 class="modal-title">{{modalHeader}}</h4>
      </div>
     </div>
    </div  

close() {
    this.IsmodelShow=true;// set false while you need open your model popup
   // do your more code
}

更新

只需在你的div中添加data-target="#modal"即可正常使用

<div class="modal-dialog" data-target="#modal">
 <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" (click)="close()">&times;</button>
    <h4 class="modal-title">{{modalHeader}}</h4>
  </div>
 </div>
</div>


close() {
//write your code
}

更新2

您需要将数据目标设置为模态的目标ID，并将data-toggle =“modal”设置为要激活模态的按钮

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" data-target="#myupdate" data-toggle="modal" class="btn btn-info btn-lg">Update</button>

  <!-- Modal -->
  <div class="modal fade" id="myupdate" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">New Update </h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" (click)="close()">Close</button>
        </div>
      </div>
    </div>
  </div>

Answer 4

在@Component开始之前在顶部添加此行。

declare var $: any;

Answer 5

data-dismiss 属性很重要。我只是使用它并获得了成功。

如果你想在关闭时执行任何额外的操作，请按如下方式处理 onClick 事件

角度 - 关闭模态窗口与事件

5 个答案:

更新