I am displaying a dialog
by using HTML directly
<!-- Dialog -->
<div class="modal fade" id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Something went wrong</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="modal-title" id="exampleModalLongTitle">Maximum 10 messages selected</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#exampleModalCenter">RunIt</button>
but I would like to do something previously so I would like to execute data-toggle="modal" data-target="#exampleModalCenter"
by javascript using (click)
So basically this would be the steps:
1- (click)="test()"
2- execute data-toggle="modal" data-target="#exampleModalCenter"
by javascript in test()
to get the DIV
that contains it, I have tried:
test(){
var dialog= <HTMLDivElement>document.getElementById(exampleModalCenter);
}
but I can not find the exampleModalCenter
you should be using attr.data-target
<button data-toggle="collapse"
[attr.data-target]="'#exampleModalCenter">RunIt
</button>
Firstly, you must add click method 'test' to button. Change your modal's class name as 'modal fade'. And after, your ts file must be like this:
@ViewChild('exampleModalCenter') exampleModalCenter;
test() {
this.exampleModalCenter.nativeElement.className = 'modal fade show';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.