0

I am using Bootstrap 3 in my application and it has a couple of modals. I want the modals to have different widths, but the only way I have found to change the width is to change the value of modal-dialog or modal-content in CSS. If I do this, it changes the width of the other modals as well. The examples I have found are usually for one modal which haven't helped much.

The modal is opened using: 

this.$modal.open({
                templateUrl: 'Modal.tpl.html',
                controller: 'ModalCtrl'}

           );

The modal is defined in an html file and I use CSS to style it.

Is there a way that I can have different modal widths without changing the value of modal-dialog or modal-content?

Juan
  • 4,910
  • 3
  • 37
  • 46
jc16
  • 1
  • 1
  • 1
    Why not use CSS for each specific modal? – code Sep 30 '15 at 23:02
  • 1
    use the `size` option. Very simple to extend the 2 optional sizes with simple css rule per size. I am assuming this is angular-ui-bootstrap – charlietfl Sep 30 '15 at 23:02
  • I found another way of doing it by using the windowClass property. Thank you for your replies. – jc16 Oct 14 '15 at 20:46

1 Answers1

0

I was able to get it to work by defining the "windowClass" property inside the $modal.open block. I found this other question and this worked without affecting the other modals: How do I increase modal width in Angular UI Bootstrap?

This is what I used:

this.$modal.open({
                templateUrl: 'Modal.tpl.html',
                controller: 'ModalCtrl',
                windowClass: 'my-modal'}
           );

Then I specified the width of the modal inside css:

.my-modal .modal-dialog
{
    width:300px;
}
Community
  • 1
  • 1
jc16
  • 1
  • 1