javascript - 将 css 动态应用于模态？

Question

我正在处理模态，这里是它的 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。我正在使用 Angular ng-show 来显示和隐藏两个 div。第一个 div 是一个小内容。因此我不想将上述样式应用于它。第二个 div 里面有很多内容。因此，当第二个 div 变得可见时，我希望将上述样式附加到它上面。

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

Answer 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>