如何在新网址上删除 Angular 中的模态开放类？答案

【问题标题】：How to remove modal-open class in Angular on new url?如何在新网址上删除 Angular 中的模态开放类？
【发布时间】：2020-07-23 13:55:22
【问题描述】：

我有一个引导模式，其中有一个按钮，单击它会将组件（存在模式的位置）路由到另一个组件（问题）。加载新组件时会出现问题，modal-open 类仍保留在body 标记中。有什么办法可以删除 modal-body 吗？此外，如果我单击返回上一页，该类仍然存在。

模态代码

<input type="submit" value="Submit" class="btn login-btn" [disabled]="profileForm.invalid" data-toggle="modal" data-target="#instructions">
<div class="modal fade" id="instructions" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Instructions</h5>
            </div>
            <div class="modal-body">
                content written here
                <form action="">
                    <div class="form-row align-items-center">
                        <div class="col-auto my-1">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
                                <label class="custom-control-label" for="customControlAutosizing">
                                    To start, click the "Start" button. When finished, click the "Submit Quiz" button.
                                </label>
                            </div>
                        </div>
                        <div class="col-auto my-1">
                            <button type="submit" class="btn btn-primary" [routerLink]="['/questions']">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

我已经写了这个 css 来覆盖主 css 但没有用：

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
  }

我还尝试从 modal div 中删除 fade 类。

【问题讨论】：

你也可以放一些代码吗？您将哪个库用于模态。单击按钮时您的呼叫功能是什么？请提供一些代码
@Çağrı 我已经重新编辑了，现在你可以看到

标签： javascript jquery angular bootstrap-4 bootstrap-modal

【解决方案1】：

在css中

.hide{
  display:none !important;
}

在您的模态读取显示参数中

<div class="modal fade {{display}}" id="instructions" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

然后给你的按钮一个点击事件

<button type="submit" class="btn btn-primary"(click)="goToQuestion()">Submit</button>

并在组件中导入路由器

import { Router } from '@angular/router';

在 costrunctor 中放置路由器并创建显示参数

display="";

constructor(private _router: Router) { }

然后写函数

goToQuestion(){
   //here dismiss modal first then route
    this.display="none";
    this._router.navigate(['questions']);
}

【讨论】：

你能告诉我如何关闭模式吗？
$('body').removeClass('modal-open'); $('.modal-backdrop').remove(); 这行得通吗？
这是 Angular 中的 javascript 代码，如果你没有将它集成到项目中，它将无法工作。但是你应该尝试$("#instructions").hide(); 如果它不起作用那么我们将尝试另一种方式
我也试过$("#instructions").removeClass('modal-open');
控制台没有错误！！我看到的是，在清除 modal-backdrop 的所有 css 属性后，问题没有发生。我在问题组件 css 中全部设置为 null 并将它们设置为重要但没有任何变化

【解决方案2】：

在您提交按钮中具有 data-dismiss="modal" 并且应该处理后降

【讨论】：