Angular UI Bootstrap modal - use custom modal window

Question

As given in the link http://angular-ui.github.io/bootstrap ( select modal from Directive drop down on top), there is a parameter called windowTemplateUrl which is used to over ride the modal content. So, in case we are using this, what to give in templateUrl or template, as one of these is required for calling the open function of modal. For e.g. the code is given below.

$scope.open = function(){
  var modalInstance = $modal.open({
      windowTemplateUrl : '/client/content.html'
  })
}

If I run the code as above, it gives error that templateUrl or template is required. So, how do I use windowTemplateUrl.

No, it should be on the same page, just over the modal backdrop or overlay — whyAto8, Jul 11 '14 at 11:08
This link might be usefull , http://popdevelop.com/2014/07/sexy-splash-modal-using-bootstrap-css3-and-angularjs/ — refactor, Oct 28 '15 at 06:47

score 8 · Answer 1 · answered Jul 11 '14 at 11:10

8

windowTemplateUrl is a template for window decoration: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

You still need to supply modal's content (using template or templateUrl) that you would like to see decorated.

answered Jul 11 '14 at 11:10

pkozlowski.opensource

117,202
60
326
286

2

Well, in that case, is there a way that I can avoid the regular modal window which comes up with white background (as shown in the link above itself, after clicking on open) and supply my own modal content, which could be anywhere on the page, not just centered. – whyAto8 Jul 11 '14 at 11:12
Sure, you just do whatever decoration with whatever CSS you want and then content will be placed inside the provided decoration template. – pkozlowski.opensource Jul 11 '14 at 11:50
Well, would it be possible to give a small sample code i.e. what to write in open function. That would really help me a lot. Thanks in advance. – whyAto8 Jul 11 '14 at 11:57
@whyAto8 sure, just send a plunk with what you've tried so far – pkozlowski.opensource Jul 11 '14 at 12:02
Here is the plunk - http://plnkr.co/edit/cWJkz2GjAjNE3JcgakGq?p=preview , its not my actual code, just a demo kind of. I havent included the parameter windowTemplateUrl, as i dont know how to use it. The content in customModal.html should appear instead of the custom modal content. Please let me know how to do that. Thank you. – whyAto8 Jul 11 '14 at 12:34
Would appreciate if you could please help me with the required plunk changes. – whyAto8 Jul 14 '14 at 15:40
Any luck with this. Im noticing that there are not a lot (any) examples of anything using windowTemplateUrl. – Tommie Jones Aug 19 '14 at 15:24
This is stumping me too. I can supply a template with windowTemplateUrl, but I have no idea how to make that show my content template. – kukabuka Oct 22 '14 at 22:49
Ok, here's a plunk of using windowTemplateUrl: http://plnkr.co/edit/WwL6tM?p=preview I copied the template html src from the UI Bootstrap src and modified it: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html – kukabuka Oct 23 '14 at 02:56

FDisk · Answer 2 · 2015-05-12T11:10:39.710

2

This is how windowTemplateUrl is working

$scope.open = function () {

var modalInstance = $modal.open({
  templateUrl:'myModalContent.html',
  windowTemplateUrl: 'customModal.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
  params: function(){
     return {
        title: 'Custom title 2'
           };
         }
      }
   });
};

Original version of angular-ui (not working)

Modificated version of angular-ui (working)

edited May 12 '15 at 11:10

answered Dec 22 '14 at 11:39

FDisk

8,493
2
47
52

How can we set value in `customModal.html`, both `{{title}}` and `{{params.title}}` didn't worked? – tomalex Feb 23 '15 at 20:10
Here is an reported bug https://github.com/angular-ui/bootstrap/issues/3134 and pull request https://github.com/angular-ui/bootstrap/pull/3133 – FDisk Feb 25 '15 at 19:10
@danielrvt So why I reported a bug to the angularui isssues page :) – FDisk Apr 09 '15 at 07:35
I want to modify the modal template also the dark overlay. How can I can put multiple files in windowTemplateUrl? – Alex Coroza Sep 13 '15 at 10:03
This works for me, since I couldn´t determine the fullpath of default windowTemplateUrl on my dynamic route it was a lot easier to implement a custom one. Thanks. – Oscar Nevarez Mar 29 '16 at 17:23
I need your solution, but I am unable to implement it in my project. I copied the template and enabled it, but it is not showing. I only see dark background, and the modal is not showing. Appreciate it if you explain to me how to implement the working solution in my project. – tarekahf Aug 03 '17 at 23:23
there is working plnkr link. Try to check the source code and dev tools console messages in your project – FDisk Aug 05 '17 at 20:37
@FDisk Well, I did check that, and realized that you have modified the source code of `angular-ui-tpl.js`, correct? – tarekahf Aug 08 '17 at 17:07
@tarekahf thats corect. This is why I submitted a bug and pull request at https://github.com/angular-ui/bootstrap/issues/3134 – FDisk Aug 24 '17 at 07:04

score 0 · Answer 3 · edited May 23 '17 at 12:16

First, you should use either base tag in you html documents or do not use relative urls.

Angular does not know about virtual directories so when path to you site looks like mysite.com/MySite there is a chance of getting into troubles.

pkozlowski.opensource has already given you an answer. Be also aware that you can provide an id of template instead of real url if you'd like to. In that case template must be declared like this:

<script type="text/ng-template" id="TemplateId">
    ...template...
</script>

Angular UI Bootstrap modal - use custom modal window

3 Answers3

Linked