Add close button to Angular UI bootstrap modal window template

1
votes

I am following the sample code as per this link:

http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal

The plunker sample here:

http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview

I tried to define a custom template customModal.html using windowTemplateUrl to add a close button (top-right) to the modal box, but the modal dialog won't show properly and I see only dark background and the modal is kind dimmed. Also, the buttons are not responding.

Appreciate if someone could help me define such custom template to allow using close button for all similar modal dialog boxes.

Update: I want to explain why this is not a possible duplicate of this question as suggested. The other question is dealing with "Why we get error when we open the dialog when we specify the template only". In this question, I the template is not showing proper even though I followed the instruction to implement it.

Tarek

1
angularjsmodal-dialogangular-ui-bootstrap
Possible duplicate of Angular UI Bootstrap modal - use custom modal window - Brian
Check this plunker out. Is this what you are looking for? - Nishant123
Thanks a lot.. looks much better, but the close button isn't working! Also could you explain how did you figure out how to fix the template ? It's not mentioned in the documentation! - tarekahf
why just don put the x close button in header? - Jesus Carrasco
@JesusCarrasco This is what I ended up doing. The reason why I want to add it to the custom template, is to implement the template that will save effort and time, and if I ever want to change the design, then I will only change the template. That is what templates are used for. - tarekahf

1 Answers

3
votes

in your script template add 

<div class="modal-header">
<button type="button" class="close" data-dismiss="dialog" data-ng-
click="cancel($event)">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
 </button>
 <h4>Title</h4>
 </div>