Question

我正在使用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>

Bootstrap示例：

<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…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

此处的Angularstrap模态部分：LINK

Answer 1

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

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

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

.wide-modal {
     width: 85%;
}

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

modal.wide = true;

以模态滚动条

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

.modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Answer 2

我是通过在控制器的每个负载上对模态中包含的元素的父元素创建jquery修改来实现的。这样，当控制器通过模态内的元素加载时，我可以将每个通用模态作为目标：

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

给角度加载dom的时间超时。我能想到的任何其他解决方案都涉及修改bootstrap ui库。它应该真的让你传递一个类或ID到模态，但这是有效的。

使用angularstrap创建不同大小的模态？

2 个答案: