显示对话框(通过alert或sweetalert)滚动到页面顶部

Question

我有一个长表(例如:1000行)。每一行都有一个按钮，如果按下这个按钮，就会通过jQuery显示一个sweetalert对话框。(http://t4t5.github.io/sweetalert/)

问题:如果我向下滚动，假设到表格的50%，当我点击按钮时，对话框确实出现了，但是，表格已经滚动到页面的顶部了。我很确定这与sweetalert如何显示的css位置有关。我试着把它从固定到绝对，但它不起作用。

.sweet-overlay, .sweet-alert{
    position: absolute !important;
    }

使用javascript的"alert"，而不是sweetalert，有相同的效果。如果我添加"e.preventDefault();"，那么它对alert有效，但对sweetalert无效。

任何想法?谢谢!

Answer 1

我已经修好了。

有一个CSS问题可能会影响一些用户。Sweet Alert 1和2都写了一个javascript，当一个模态打开，添加一个类到你的

overflow-y: scroll;

对于一些用户来说，简单地删除这些CSS可能会起作用，奇怪的是，它不适合我。

注释掉sweet-alert.js中的699行

// addClass(document.body, swalClasses.shown); // BREAKS THEME

更新:

你可以添加一些css:

body.swal2-shown { overflow-y: none !important; }

然而，我得到一个奇怪的酒吧。但我在做一些奇怪的主题。两害相权取其轻。:)

Answer 2

原来的甜蜜警报插件是不支持的，我建议你使用SweetAlert2插件，它没有你提到的问题。

迁移很简单，下面是迁移指南:从SweetAlert迁移到SweetAlert2

下面是使用SweetAlert2实现的案例示例(100行):

swal({
  html: '<table>' + '<tr><td>row</td></tr>'.repeat(100) + '</table>'
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

Answer 3

查看JS，我可以看到旧版本的sweet alert插件在调用时为文档主体添加了一个名为stop-scrolling的样式。这似乎是影响页面位置的因素。

作为我正在做的一个网站的快速修复，注释掉这个样式的高度和溢出(在sweetalert.css中)阻止了页面跳转。

显然不是最终解决方案，只是一个修复。