Bootstrap: How can I change a modal's width with CSS without affecting other modals?

Question

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 ?

Answer 1

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;
}