modal-content 未设置高度以包含内容答案

【问题标题】：modal-content not setting height to contain contentmodal-content 未设置高度以包含内容
【发布时间】：2016-03-24 00:12:50
【问题描述】：

我正在尝试学习 Angular，但模态框不起作用。模态将显示，但 modal-content div 并没有增长到包含所有内容。相反，内容只是跑出了一个非常短的模式的底部。请参阅下图了解它的作用：

三个小段落和下面的链接应该在模态框内。

这是“登录”页面的控制器：

MyApp.controller('loginController', ['$scope', '$location', '$translate', '$http', 'browserCheckService', 'modalService', function ($scope, $location, $translate, $http, browserCheckService, modalService) {
    'use strict';
    $scope.checkBrowser = function() {
        if (browserCheckService.browserCheck() === false) {
            try {
                var settings = {
                    title: 'Incompatible Browser Warning',
                    size: 'lg',
                    templateUrl: 'Pages/browserReject.html',
                    controller: 'browserRejectController'
                }
                modalService.DisplayModal(settings);
            } catch (err) {
                alert(err.message);
            }
        }
    };
    $scope.checkBrowser();
}]);

这是 browserReject 的控制器：

MyApp.controller('browserRejectController', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) {
    'use strict';
    $scope.close = function () {
        $uibModalInstance.dismiss();
    }
}]);

这里是modalService：

angular.module('MyApp').service('modalService', ['$uibModal', function ($uibModal) {
    'use strict';
    this.DisplayModal = function (settings) {
        if (settings === undefined) {
            throw "Settings must be supplied for modal";
        } else {
            var modalInstance = $uibModal.open({
                animation: true,
                templateUrl: settings.templateUrl,
                controller: settings.controller,
                size: settings.size
            });
        }
    };
}]);

browserCheckService 被简单地设置为返回 false，因此我可以测试模式。

这是 browserReject.html 的内容：

<div id="modalHeaderContainer">
    <div id="title">Incompatible Browser Warning</div>
    <div id="closeButton">
        <button type="submit" class="close" ng-click="close()">X</button>
    </div>
</div>
<hr />
<div id="jr_outer">
    <div id=jr_inner">
        <div id="jr_center">
            <p translate={{'application__browser_reject_message'}}"></p>
            <ul>
                <li>
                    <a target="_blank" href="http://www.google.com/chrome/>Google Chrome</a>
                </li>
                <li>
                    <a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/>Firefox</a>
                </li>
                <li>
                    <a target="_blank" href="http://www.apple.com/safari/>Safari</a>
                </li>
                <li>
                    <a target="_blank" href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>
                </li>
            </ul>
        </div>
    </div>
</div>

这是我的 CSS，因为它目前代表模态：

/* CSS for modal settings */
.ng-modal-overlay {
    /* A dark translucent div that covers the whole screen */
    position:absolute;
    z-index:9999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity: 0.8;
}
.ng-modal-dialog {
    /* A centered div above the overlay with a box shadow. */
    z-index:10000;
    position: absolute;
    width: 50%; /* Default */

    /* Center the dialog */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);

    background-color: #fff;
    box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
    padding:10px;
    text-align: left;
}
.ng-modal-close {
    position: absolute;
    top: 3px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 120%;
    display: inline-block;
    font-weight: bold;
    font-family: 'arial', 'sans-serif';
}

#modalHeaderContainer {
    width:100%;
    height: 1.5em;
}

#title {
    float:left;
    font-size:1.7em;
    padding-left:.5em;
}

#closeButton {
    float:right;
    padding-top:.5em;
    padding-right:.5em;
}
/* End CSS for modal settings */

我已经阅读了here 和here 以及其他几个帖子，但似乎没有什么适合。我觉得好像我忽略了一些非常简单的东西，但找不到它。我尝试将 modal-content 上的 max-height 设置为 100%，但这也不会改变显示。

【问题讨论】：

使用适用的 css 创建一个可以复制问题的演示
我知道我会忘记一些事情。向问题添加了模态 CSS。
你缺少模态体吗？！如果您不将内容放在 modal-body 中，它可能会这样显示！
那个 css 是没有意义的，因为 css 中显示的类不在显示的 html 中。 plinker 中代表问题的演示会更有意义
模态框不涉及额外的 CSS，因此在任何地方创建演示都是毫无意义的，因为不会神奇地出现任何新内容。

标签： angularjs bootstrap-modal

【解决方案1】：

您应该通过在您的 css 中执行以下操作来覆盖默认的 .modal-window：

.mynewModal-modal-window .modal-window {
  width: 100%;
  height: 100%;
}

并将其类作为参数添加到 $uibModal 的 open 方法中：

this.DisplayModal = function (settings) {
    if (settings === undefined) {
        throw "Settings must be supplied for modal";
    } else {
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: settings.templateUrl,
            controller: settings.controller,
            windowClass: 'myNewModal-modal-window',
            size: settings.size
        });
    }
};

我还没有找到通过控制器覆盖模态内容的方法:(（如果有类似的东西就好了）

【讨论】：

你也可以添加一个windowTemplateUrl的参数：'myWindowTemplate.html'，这样你就可以在modal后面创建一个图层...

【解决方案2】：

不完全适合，但寻找 uibmodal css 溢出问题答案的人需要这个：

信不信由你，如果您没有将 overflow:hidden 或 overflow:scroll 设置在您将 高度设置为 的任何动态上，例如角度中的中继器，或者在 jquery 中注入内容，内容看起来好像模态没有拉伸，而实际上它完全按照预期进行。

【讨论】：