6

I would like to fire an event when the close button is clicked within the modal window. The button has the attribute data-dismiss="modal" and doesn't call the click event. Is it possible to have data-dismiss and click event or only click event and close modal from class? 

<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(); }

Method close dont call because button has data-dismiss attribute.

Thank you

Improve this question
2
  • Using jQuery use can close the model. Commented Nov 14, 2017 at 6:29
  • 1
    @Sreemat this is an Angular question Commented Feb 27, 2022 at 19:01

5 Answers 5

Reset to default
4

In angular, use [hidden] attribute to show/hide the model popup, and remove data-dismiss="modal" in your close button

try this 

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

Update

just add data-target="#modal" in your div and it will be works 

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

Update 2

You need to set data-target as target id of your modal and data-toggle = "modal" to the button on which you want to activate the 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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

how will this work, if i click outside the modal to close it?
@reverie_ss see the 2nd updated answer.
1

Add this line on top before @Component starts.

declare var $: any;
Improve this answer

Comments

1

In your close function add this

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

Comments

0

You cannot have the data-dismiss="modal" and call a function, instead inside your close function do the following:

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

I'm assuming you're using bootstrap, so you're using jQuery.

Improve this answer

1 Comment

Thanks, but It not works. I have this modal: <div class="modal"><div class="modal-dialog" id="modal"></div></div> and when I use $('#modal').modal('hide');, error is __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).modal is not a function
0

data-dismiss property is important. I just use it and got the success.

if you want to perform any additional operation on closing then handle the onClick event as below

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.