Angular UI Bootstrap Modal strips id and class attributes

angular-ui, angular-ui-bootstrap, angularjs

Solution

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.

Problem

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?

Original source