Angularjs – Add close button to Angular UI bootstrap modal window template

angular-ui-bootstrapangularjsmodal-dialog

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

Best Answer

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