Angular UI Modal CSS

Question

我正在使用Angular UI模式，并希望使其更小。根据引导的网站，使模较小的时候应该使用模式平方米的改性剂类：

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

我有麻烦纳入这个div到我的角度模式的模板。我发现的每个Angular UI模式示例都只包含模板中的模态头，模态体和模态脚注div。 Angular已经提供了外部模态，模态对话框和模态内容div吗？如果是这样，是否有任何方法来覆盖它们，以便我可以将“模态-sm”应用于模态对话框div？我试图在模板中添加完整的模态div结构，并导致模态问题。我也尝试在我的控制器中设置windowClass =“模态对话框模式-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模态医科”