Angular - modales Fenster mit Ereignis schließen

Question

Ich möchte ein Ereignis auslösen, wenn die Schaltfläche zum Schließen innerhalb des modalen Fensters geklickt wird. Die Schaltfläche hat das Attribut data-dismiss="modal" und ruft das Ereignis click nicht auf. Ist es möglich, Daten-Kündigungen und click Ereignis oder nur click Ereignis zu haben und Modal aus der Klasse zu schließen?

<div class="modal-dialog"> 
<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() { 
    //Can I close modal window manually? 
    this.onClose.emit(); 
    } 

Methode close tun sie nicht nennen, weil Schaltfläche data-dismiss Attribut hat.

Danke

Answer 1

In Winkel verwenden [hidden] Attribut zum Anzeigen/das Modell Pop-up verstecken, und entfernen Sie data-dismiss="modal" in Ihrer Schließen-Schaltfläche

versuchen, diese

<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 
} 

---

Aktualisieren

nur data-target="#modal" in Ihrem div hinzufügen und es wird Werke

<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 
} 

aktualisieren 2

Sie müssen Datensatz-Ziel als Ziel-ID des modal und Daten-Toggle = „modal sein "auf die Taste, auf dem Sie die modale

<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>

aktivieren möchten

Answer 2

Sie nicht die data-dismiss="modal" und rufen eine Funktion haben können, anstatt in Ihrer Nähe-Funktion wie folgt vor:

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

Ich nehme an, Sie Bootstrap verwenden, so dass Sie jQuery verwenden.

Answer 3

In Sie close Funktion hinzufügen, um dieses

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