1

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

tarekahf
  • 738
  • 1
  • 16
  • 42
  • Possible duplicate of [Angular UI Bootstrap modal - use custom modal window](https://stackoverflow.com/questions/24696224/angular-ui-bootstrap-modal-use-custom-modal-window) – Brian Aug 03 '17 at 23:59
  • 1
    Check [this plunker](http://plnkr.co/edit/k0JqL6LjZYpBwLxtp9ld?p=preview) out. Is this what you are looking for? – Nishant123 Aug 04 '17 at 06:23
  • 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 Aug 05 '17 at 14:55
  • why just don put the x close button in header? – Jesus Carrasco Aug 05 '17 at 16:58
  • @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 Aug 08 '17 at 15:39

1 Answers1

3

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>
Jesus Carrasco
  • 1,355
  • 1
  • 11
  • 15