显示对话框（通过警报或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（）;”然后它适用于警报，但不适用于sweetalert。

有什么想法吗？谢谢！

Answer 1

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

迁移很简单，这是迁移指南：Migration from SweetAlert to 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 2

我已经修好了。

可能会影响某些用户的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 3

通过JS我可以看到，甜蜜警报插件的遗留版本添加了一种称为停止滚动的样式来记录正文。这似乎是影响页面位置的因素。

作为我正在处理的网站的快速修复，注释掉这个样式的高度和溢出（在sweetalert.css中）停止了页面跳跃。

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

希望这有帮助。