角UI模态CSS

Question

我使用的是角度UI模式，并想使它更小。根据Bootstrap的网站，为了使模态变得更小，我应该使用modal修饰符类：

<div class="modal-dialog modal-sm">

我很难把这个div整合到我的角度模态模板中。我发现的每个角度UI模态示例只包括模板中的模态标头、模态体和模态页脚div。外部模态、模态对话框和模态内容div已经由角提供了吗？如果是这样的话，是否有任何方法来覆盖它们，以便我可以将“模式-sm”应用于模态对话框div？我尝试将全模态div结构添加到模板中，这给我的模式带来了问题。我还尝试在我的控制器中设置windowClass =“模态-对话模式-sm”，但这也不起作用。有什么想法吗？谢谢。

更新:在我尝试包含外部引导程序div之后，是我的模式模板的内容。这是一个非常简单的模式来确认用户想要删除一个项目。

<div class="modal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
           <div class="modal-header">
                <h4>Confirm Delete</h4>
           </div>
           <div class="modal-body">
               <p>Are you sure you want to delete?</p>
           </div>
           <div class="modal-footer">
               <button class="btn btn-primary" ng-click="confirm()">Confirm</button>
               <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
           </div>
        </div>
     </div>
 </div>

结果是它没有正确地显示我的模态。我可以看到背景和很小的一小块我认为是我的模式。

更新:使用@lmyers的解决方案的适用于我，但我没有将宽度指定为60%，而是使用@modal变量执行以下操作。

.confirm-modal .modal-dialog {
    width: @modal-sm;
}

Answer 1

好吧，我现在明白了。以下是我们在.css中所做的工作：

.appcustom-modal-med > .modal-dialog {
  width: 60%;
}

然后在控制器中: windowClass：‘appcustom med’