将css动态应用于模态？答案

【问题标题】：Apply css dynamically to a modal?将css动态应用于模态？
【发布时间】：2017-07-21 14:58:14
【问题描述】：

我正在研究一个模态，这里是它的 html 代码。如果您查看样式标签，我基本上会覆盖 .model-content css 类和 .modal-dialog css 类。

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

<style>
    .modal-content {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        margin: 120px 0px 0px 0px;
    }
    .modal-dialog {
        height: 70%;
    }
</style>

<div ng-show="Userinfo">
</div>

<div ng-show="!Userinfo">
</div>

提到了 2 个 div，并且都链接到 $scope.Userinfo。我正在使用角度 ng-show 来显示和隐藏两个 div。第一个 div 是一个小内容。因此，我不想将上述样式应用于它。第二个 div 里面有很多内容。因此，当第二个 div 变得可见时，我希望将上述样式附加到它上面。

任何人都可以告诉我是否可以将上述样式动态分配给第二个 div。目前它正在将上述样式应用于 div 并且第一个 div 在不需要时看起来非常大。

【问题讨论】：

ng级？？？ docs.angularjs.org/api/ng/directive/ngClass
您可以简单地将 css 用于第二个 div，甚至无需 ng-class。只需定义一个类并将这些类名放在那里
父 div 上是否没有使用 ng-show 指令的类？

标签： javascript jquery html css angularjs

【解决方案1】：

您可以通过 CSS 来完成。您可以将具有样式的 CSS 类应用于第一个模式，但不能应用于第二个：

<style>
        .custom-modal .modal-content {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            margin: 120px 0px 0px 0px;
        }

        .custom-modal .modal-dialog {
            height: 70%;
        }
</style>


<div ng-show="Userinfo" class="custom-modal">
</div>

<div ng-show="!Userinfo">
</div>

【讨论】：