Angular UI 模态 CSS

Question

我正在使用 Angular UI 模式并希望将其缩小。根据 Bootstrap 的网站，要使模态更小，我应该使用 modal-sm 修饰符类：

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

我无法将此 div 合并到我的 Angular 模态模板中。我发现的每个 Angular UI 模态示例都只包含模板中的 modal-header、modal-body 和 modal-footer div。 Angular 是否已经提供了外部模态、模态对话框和模态内容 div？如果是这样，有什么方法可以覆盖它们，以便我可以将“modal-sm”应用于模态对话框 div？我尝试将完整的模态 div 结构添加到模板中，但它导致我的模态出现问题。我还尝试在我的控制器中设置 windowClass = "modal-dialog modal-sm" 但这也不起作用。有任何想法吗？谢谢。

更新：这是我尝试包含外部 Bootstrap 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-sm Less 变量。

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

Answer 1

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

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

然后在控制器中： windowClass: 'appcustom-modal-med'