10

Live Example

Adding the following Angular UI Bootstrap Modal:

<div id="my-id" class="my-class" modal="opened">
  <p>Modal Here</p>
</div>

results in:

<div class="modal ng-scope">
  <p>Modal Here</p>
</div>

Why the id and class attributes are stripped?

I would like to set some CSS styling on the dialog, e.g. dialog's width, or styling some dialog's inner elements. How could I achieve that?

Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746

2 Answers2

12

Because I just came across this irritating issue myself and the documentation and default behavior isn't obvious. You can now pass in additional classes via the $modal.open() method using the windowClass option:

var modalInstance = $modal.open({
      templateUrl: 'templateUrl.html',
      controller: Controller,
      windowClass: 'custom-css-class',
      ...
    });

Can't set an ID though which is lame. More info in the official angular-ui modal docs.

standingwave
  • 488
  • 3
  • 8
9

Here's the github issue explaining why the id is being stripped.

As for the class, I'm not sure why's that stripped, but you can use $dialog options to specify the class (which will fix your issue):

<div id="my-id" modal="opened" options="{dialogClass: 'modal my-class'}">
  <p>Modal Here</p>
</div>
Stewie
  • 60,366
  • 20
  • 146
  • 113
  • Looks like setting `dialogClass` causes the modal not to show up properly: http://plnkr.co/edit/PyDqFwY8ejhZVqvzjwq6?preview&p=preview. I guess it's because setting `dialogClass` removes the `modal` class. Any ideas how to fix that? – Misha Moroshko Mar 14 '13 at 11:14
  • I guess I could set `dialogClass: 'modal my-class'`, but it looks a bit hacky. Is there a better way? – Misha Moroshko Mar 14 '13 at 11:23
  • Yeah, I forgot about the modal class. Don't know of any other way, haven't used this too much. – Stewie Mar 14 '13 at 11:26
  • 2
    It seems like this was stripped in the newest release of `$modal`, so it seems. Pretty breaking change for me honestly. – dmackerman Sep 03 '13 at 17:20
  • 2
    $dialog has been removed: https://github.com/angular-ui/bootstrap/tree/master/src – Per Quested Aronsson Sep 17 '13 at 13:44