弹窗二次触发时显示在页面底部且页面未滚动至顶部的问题求助

Hey there, let's tackle this frustrating popup issue you're dealing with. The core problem here is that after submitting the form via the bottom save button, your popup's positioning gets tied to that bottom area instead of staying at the top. Let's walk through some actionable fixes:

1. Ensure Scroll Completes Before Showing the Popup #

Browsers can sometimes delay rendering scroll actions, especially if there's other JS running after form submission. By waiting for the browser to finish scrolling to the top before triggering the modal, you can avoid the popup inheriting the current scroll position.

Try this adjusted function:

function showPopupNew(ob) {
    // Force instant scroll to top (skip smooth behavior to avoid delays)
    window.scrollTo({
        top: 0,
        behavior: 'instant'
    });

    // Wait for the browser to render the scroll before showing the modal
    requestAnimationFrame(() => {
        $(ob).modal('show');
        // Lock the popup to the viewport top
        $(ob).css({
            position: 'fixed',
            top: '0',
            left: '50%',
            transform: 'translateX(-50%)' // Optional: keeps popup centered horizontally
        });
        $(ob).focus();
    });
}

2. Move the Popup to the Root <body> Element #

After form submission, it's possible that your popup element got dynamically appended to a container near the bottom save button (like the form itself). This makes its positioning relative to that container instead of the entire viewport. Fix this by moving the popup back to the <body> root before showing it:

function showPopupNew(ob) {
    window.scrollTo(0, 0);
    // Reattach the popup to the body to reset its positioning context
    $(ob).appendTo('body');
    $(ob).modal('show');
    $(ob).focus();
}

3. Reset Inherited Styles Before Showing the Popup #

Form submission might be triggering other scripts that modify the popup's CSS (like adding position: relative or overriding top values). Reset these styles explicitly to ensure the popup behaves as expected:

function showPopupNew(ob) {
    window.scrollTo(0, 0);
    // Clear any custom positioning styles that might be messing things up
    $(ob).css({
        position: '',
        top: '',
        left: '',
        transform: ''
    });
    // Show the modal, then lock it to the top
    $(ob).modal('show').css({
        position: 'fixed',
        top: '0',
        left: '50%',
        transform: 'translateX(-50%)'
    });
    $(ob).focus();
}

4. Hook Into the Modal's Shown Event #

If you're using Bootstrap modals, the shown.bs.modal event fires after the modal is fully visible. Use this to force scroll and positioning again, in case the modal's internal scripts override your settings:

function showPopupNew(ob) {
    // Remove any existing event listeners to avoid duplicates
    $(ob).off('shown.bs.modal').on('shown.bs.modal', function() {
        window.scrollTo(0, 0);
        $(this).css({
            position: 'fixed',
            top: '0',
            left: '50%',
            transform: 'translateX(-50%)'
        });
        $(this).focus();
    });

    window.scrollTo(0, 0);
    $(ob).modal('show');
}

Start with the first two solutions—they're the most likely fixes for this scenario. If those don't work, try resetting styles or using the modal's shown event to enforce your desired behavior.

内容的提问来源于stack exchange，提问作者Sami In