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提供？如果是这样，有没有办法覆盖它们，以便我可以应用＆＃34; modal-sm＆＃34;到模态对话框div？我尝试将完整的模态div结构添加到模板中，这会导致我的模态出现问题。我也尝试过设置windowClass =＆＃34;模态对话框modal-sm＆＃34;在我的控制器中但是也没有用。有任何想法吗？感谢。

更新：在我尝试包含外部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变量。< / p>

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

Answer 1

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

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

然后在控制器中： windowClass：＆＃39; appcustom-modal-med＆＃39;

Angular UI Modal CSS

1 个答案: