jQuery模态弹出导致页面滚动

Question

So I have a modal window that is causing the page to scroll down. It adds #login-box to the url but that div id is not a set place. I thought about adding a div to the html but that wouldn't work because my menu is sticky and it would cause them to scroll to wherever that div is.

http://onecraftyshop.com and click "login" in the nav menu. You will see what I'm talking about. Then scroll down and click it again and oyu will see that it scrolls down no matter where you are on the page.

Here is the relevant JS of the modal window:

// Load the modal window
$('a.login-window').click(function() {

    // Get the value in the href of our button.
    var login_id = $(this).attr('href');

    // Add our overlay to the body and fade it in.
    $('body').append('<div id="overlay"></div>');
    $('#overlay').fadeIn(300);

    // Fade in the modal window.
    $(login_id).fadeIn(300);

    // center our modal window with the browsers.
    var margin_left = ($(login_id).width() + 24) / 2;
    var margin_top = ($(login_id).height() + 24) / 2;

    $(login_id).css({
        'margin-left' : -margin_left,
        'margin-top' : -margin_top
    });

    return false;
});

I tried changing

var margin_top = ($(login_id).height() + 24) / 2; to

var margin_top = ($(login_id).height() + 24) / .7; and that stopped the scrolling but the box wasn't centered (it was actually cut off at the top of the page) I then thought "oh easy just change the positioning with css", but then that caused it to start scrolling again!

Visit http://onecraftyshop.com and click "login" in the nav menu. The modal window should pop up and the page will scroll. CSS through firebug or dev tool in chrome.

Let me know if you need anything else.

Thanks for helping me sort this one out!

------------CSS for #overlay as requested--------------------------

background: none repeat scroll 0 0 #000000;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 9999999;

Answer 1

To stop scrolling on the page, create this javascript function (written in plain javascript):

scrollingToggleIterates = 0;
function toggleScrolling(event){
    if(scrollingToggleIterates%2 == 0){
        var scrollPosition = document.documentElement.scrollTop;
        document.body.className = 'stopScrolling';
        document.documentElement.scrollTop = scrollPosition;
    }
    else{
        var scrollPosition = document.documentElement.scrollTop;
        document.body.className = '';
        document.documentElement.scrollTop = scrollPosition;
    }
    scrollingToggleIterates++;
}

Then add this class to your css:

.stopScrolling{
  height: 100%;
  overflow:hidden;
}

Call the toggleScrolling function when you want to prevent scrolling, then call the function again when you want to restart it. I know you're working in JQuery, but you should be able to intermix it with plain JS.

Answer 2

The plugin that scrolls the window down on fragment links is causing this. If you unhide the login menu you can see the window is scrolling down to it's original location. Since this isn't the default browser behavior, return false or event.preventDefault() will not stop this behavior. You will need to see if there's a class you can add to this link that will stop the plugin from scrolling when this link is clicked.

Another option is to not use the href property for the id of the login window. Make it either href="javascript:void(0)" or just href="#" . Then use a data attribute like: data-target="loginMenu" and update your javascript to grab the id from this attribute:

var login_id = $(this).attr('data-target');