Отображение диалогового окна (через alert или sweetalert) прокрутки вверху страницы

Question

У меня длинный стол (например: 1000 строк). Каждая строка имеет на ней кнопку, которая, если она нажата, отображает диалог сладости через jQuery. (http://t4t5.github.io/sweetalert/)

ПРОБЛЕМА: Если я прокручиваю вниз, скажем, до 50% таблицы, когда я нажимаю кнопку, диалог будет отображаться правильно, НО, таблица прокручивается полностью до верхней части страницы. Я уверен, что это связано с позицией css о том, как отображается сладость. Я попытался изменить его с фиксированного на абсолютный, но он не работает.

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

Использование javascript «alert», а не sweetalert, имеет тот же эффект. Если я добавлю «e.preventDefault();» то он работает для предупреждения, но не для сладости.

Любые идеи? Благодаря!

Answer 1

Оригинальный плагин с предупреждающим предупреждением не поддерживается, я предлагаю вам использовать плагин SweetAlert2, в котором нет упомянутой вами проблемы.

Миграция просто, вот Руководство по миграции: Migration from SweetAlert to SweetAlert2

Вот пример вашего дела (100 строк), реализованных с SweetAlert2:

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

<script src="https://unpkg.com/sweetalert2@7.3.2/dist/sweetalert2.all.js"></script>

Answer 2

Просматривая JS я может видеть, что устаревшая версия плагина с предупреждающим предупреждением добавляет стиль, называемый stop-scrolling для документирования тела при вызове. Кажется, это влияет на позицию на странице.

В качестве быстрого исправления на сайте, над которым я работал, комментируя высоту и переполнение в этом стиле (в sweetalert.css), остановилась страница.

Очевидно, что это не окончательное решение, просто исправление.

Надеюсь, это поможет.

Answer 3

Я исправил его.

Существует проблема с CSS, которая МОЖЕТ повлиять на некоторых пользователей. Сладкие оповещения 1 и 2 как написать JavaScript при открытии модального, что добавляет класс к вашему

overflow-y: scroll; 

Это может работать для некоторых пользователей просто удалить этот CSS, как ни странно, это было не для меня.

Так закомментируйте строку 699 в кисло-alert.js

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

Обновление:

Вы можете просто добавить некоторые CSS:

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

Однако, я получаю странный бар. Но я делаю некоторые странные темы. Это меньше двух зол. :)