时间戳

首页 > 解决方案 > 单击关闭/关闭 ng-bootstrap 模式会导致页面滚动到顶部

javascript - 单击关闭/关闭 ng-bootstrap 模式会导致页面滚动到顶部

问题描述

我目前正在使用Ng-Boostrap 的 modal。

在模态中，我有一个反应形式。

出于某种原因，当我单击关闭按钮、提交按钮或单击模态区域外部以关闭/关闭模态时，会导致在模态关闭后页面一直滚动到顶部。

请问有没有人遇到过类似的问题，有解决办法吗？我绝对不希望它滚动到页面顶部。

这是我的 component.html 上的模态代码：

<!--begin::Modal-->
<ng-template #content let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="product-allocation-settings">Product Allocation</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form [formGroup]="productAllocationForm">
      <!-- other irrelevant form fields -->
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="d('Submit')">Submit</button>
  </div>
</ng-template>
<!--end::Modal-->

在我的 component.ts 上，它处理模态中表单的提交。这也关闭了模态。

this.modalService.open(content, { size: 'lg', centered: true }).result.then(() => {

}, (reason) => {
  if (reason === 'Submit') {
    this.save();
  }
});

我尝试了以下解决方案，但我似乎没有任何运气。

1）点击后防止页面滚动？

2)提交表单时防止浏览器跳转到首页

标签： javascriptangulartypescriptng-bootstrap

解决方案

推荐阅读