自定义模态面板大小 Ui Bootstrap答案

【问题标题】：Customizing Modal Panel size Ui Bootstrap自定义模态面板大小 Ui Bootstrap
【发布时间】：2015-02-01 04:22:43
【问题描述】：

我正在使用 Ui 引导程序构建一个应用程序，以将一些引导程序组件与 AngularJs 集成。我需要使用模态面板，但具体而言，预定义的大小“lg”（大）不足以满足我的需要。所以我需要自定义。阅读文档，自定义您需要在使用属性“windowClass”打开模式时传递一个 css 类。所以我创建了一个名为 'modal-huge' 的 Css 类，如下所示：

.modal-huge .modal-dialog{
width: 80%;
}

.modal-body
{
height: 80%;
}

然后我在打开模态面板时将这个类作为参数传递：

var modalInstance = $modal.open({
            templateUrl: 'productDetail.html',
            controller: 'ProductDetailController',
            windowClass: 'modal-huge',
            resolve:{
              productDetail: function (){
              $scope.hideLoader();
              return response;
              }
            }

          });

我对宽度和高度都使用了百分比来进行响应式设计，因此它们会根据父元素的大小来适应屏幕的大小。我的问题是它只适用于宽度，但不适用于高度。如果我以像素 (px) 为单位给出大小，则高度仅考虑更改，但如果我给出百分比则不考虑更改，这会破坏响应式设计。知道有什么问题或有什么方法可以解决吗？非常感谢！！

我会显示其余代码以防万一。

模态面板代码：

 <div>
 <script type="text/ng-template" id="productDetail.html">


    <div class="modal-header">
        <h3 class="modal-title">Product</h3>
    </div>
    <div class="modal-body">


    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-ng-click="ok()">OK</button>
        <button class="btn btn-warning" data-ng-  click="cancel()">Cancel</button>
    </div>


 </script>

</div>

还有我在其中包含名为“productDetailPanel”的模态面板的主体

<body data-ng-controller="AppController">


    <div id="container" class="container">

   <toaster-container toaster-options="{'position-class': 'toast-container- custo','time-out': 3000, 'close-button':true}"></toaster-container>

        <div id="header" data-ng-include="'partials/header/header.html'" >   </div>



        <div data-ng-view></div>
        <div id="footer" data-ng-include="'partials/footer/footer.html'">  </div>

    <!-- This is the div with the overlay css class, so no matter where it  is located this div inside the screen, it will cover the whole screen-->
        <div id="loader" class="loading overlay" data-ng- if="loader.loading">
            <p>{{loader.loadingMessage}}</p>
            <img alt="" src="images/ajax-loader.gif">
         </div>

    </div>

    <div id="loginPanel" data-ng- include="'partials/content/panels/login.html'"></div>
    <div id="productDetailPanel" data-ng- include="'partials/content/panels/productDetail.html'"></div>

</body>

【问题讨论】：

标签： angularjs css twitter-bootstrap

【解决方案1】：

为了使 % height 起作用，您还必须为父元素设置一个高度。在 .modal-body 示例中，父级是 .modal-content，它的父级是 .modal-dialog。

试试这样的

.modal-dialog, .modal-content {
  height: 100%;
}

.modal-body {
  height: 80%;
}

或查看类似问题Set bootstrap modal body height by percentage

【讨论】：