0

我将 angularstrap 用于模态框，我注意到模板没有父 .modal 容器。这引出了我的问题。当我无权为该模态框包装器添加类或 id 时，如何以不同的方式设置不同的模态框（包括大小）？

似乎我只能对已经存在的类进行样式设置，这意味着我的所有样式都适用于每个单独的模态框，当我有样式完全不同的不同模态框时，这是不好的。

Angularjs

   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Modal header</h3>
    </div>
    <div class="modal-body">

    </div>
    <div class="modal-footer">
      <button type="button" class="btn" ng-click="dismiss()">Close</button>
      <button class="btn btn-primary" ng-click="modal.saved=true;dismiss()">Save changes</button>
    </div>

引导示例：

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Angularstrap 模态部分在这里：链接

4

2 回答 2

2

最近在做一个项目时，为了添加一些自定义 css，我在模板中现有的模态对话框中添加了一个 ng-class

 <div class="modal-dialog" ng-class="{'wide-modal':modal.wide === true}">

然后为自定义类添加了一些css

.wide-modal {
     width: 85%;
}

然后每当我启动一个模态并想要我的自定义大小模态时，我都会在范围中添加一个变量

modal.wide = true;

模态滚动条

如果我的模态内容对于模态来说太多了，所以我通过将此 css 添加到 .modal 正文来添加滚动

.modal-body {
    max-height: 420px;
    overflow-y: auto;
}
于 2014-03-24T23:01:27.893 回答
0

我通过在控制器的每次加载时对包含在模态中的元素的父元素创建一个 jquery 修改来做到这一点。这样，当通过模态内的元素加载控制器时，我可以定位每个通用模态，例如：

setTimeout(function(){
      $('#login').parent().css({
        "width":"562px",
        "margin-left":"-281px",
        "overflow":"auto",
        "border-radius":"7px"
      });
    },50);

给加载 dom 的角时间是超时的。我能想到的任何其他解决方案都将涉及修改引导 ui 库。它确实应该让您将类或 ID 传递给模态，但这是可行的。

于 2014-11-07T09:36:38.400 回答