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
– whyAto8, Commented Jul 11, 2014 at 11:08

pkozlowski.opensource · Accepted Answer · 2014-07-11 11:10:32Z

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, 2014 at 11:10

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

whyAto8 Over a year ago

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.

pkozlowski.opensource Over a year ago

Sure, you just do whatever decoration with whatever CSS you want and then content will be placed inside the provided decoration template.

whyAto8 Over a year ago

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.

pkozlowski.opensource Over a year ago

@whyAto8 sure, just send a plunk with what you've tried so far

whyAto8 Over a year ago

Here is the plunk - 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.

|

FDisk · Accepted Answer · 2015-05-12 11:10:39Z

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, 2015 at 11:10

answered Dec 22, 2014 at 11:39

FDisk

9,6732 gold badges54 silver badges56 bronze badges

9 Comments

tomalex Over a year ago

How can we set value in customModal.html, both {{title}} and {{params.title}} didn't worked?

FDisk Over a year ago

Here is an reported bug github.com/angular-ui/bootstrap/issues/3134 and pull request github.com/angular-ui/bootstrap/pull/3133

FDisk Over a year ago

@danielrvt So why I reported a bug to the angularui isssues page :)

Alex Coroza Over a year ago

I want to modify the modal template also the dark overlay. How can I can put multiple files in windowTemplateUrl?

Onevarez Over a year ago

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.

|

Community · Accepted Answer · 2017-05-23 12:16:58Z

0

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>

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Dec 29, 2014 at 9:20

Pavel Voronin

14k10 gold badges78 silver badges152 bronze badges

Collectives™ on Stack Overflow

Angular UI Bootstrap modal - use custom modal window

3 Answers 3

9 Comments

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related