Angular UI Modal CSS

Question

我正在使用Angular UI模式,并希望将其缩小.根据Bootstrap的网站,为了使模态更小,我应该使用modal-sm修饰符类:

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

我无法将此div合并到我的Angular模态模板中.我发现的每个Angular UI模态示例都只包含模板中的modal-header,modal-body和modal-footer div.外部模态,模态对话和模态内容div是否已由Angular提供？如果是这样,有没有办法覆盖它们,以便我可以将"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'