Question

我在我的应用程序中使用Bootstrap 3，它有几个模态。我希望模态具有不同的宽度，但我发现更改宽度的唯一方法是更改CSS中modal-dialog或modal-content的值。如果我这样做，它也会改变其他模态的宽度。我发现的例子通常是针对一种没有多大帮助的模态。

使用以下方式打开模态：

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

           );

模态在html文件中定义，我使用CSS来设置样式。

有没有办法可以在不更改modal-dialog或modal-content的值的情况下使用不同的模态宽度？

Answer 1

通过在$ modal.open块中定义“windowClass”属性，我能够使它工作。我发现了另一个问题，这在不影响其他模态的情况下有效： How do I increase modal width in Angular UI Bootstrap?

这就是我使用的：

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

然后我在css中指定了模态的宽度：

.my-modal .modal-dialog
{
    width:300px;
}

Bootstrap：如何在不影响其他模态的情况下使用CSS更改模态的宽度？

1 个答案: