CODEWITHSUNDEEP
jqueryhtmlcss
Naomi K
Naomi K

Reputation: 1447

how to prevent my jquery modal from scrolling to the top of the window?

Hi i think its ugly when I click on form button the modal brings user up to the start of the page. I would rather it stay where the user is currently on the page. Is this possible? 

$(".buttons").click(function(){
        $("#overlay-modal").fadeIn();
    });
    $(document).mousedown(function(e){
            var clicked = $(e.target);
        if (clicked.is('.inner-modal') || clicked.parents().is('.inner-modal')){
                return;
            } else { $('#overlay-modal').hide();
        }
    });
 });

this is what i currently have. I tried to add an anchor tag at the bottom of where i would like the page to stay but this didnt work. I also try moving the form's location on the page.

Upvotes: 2

Views: 1776

Answers (2)

user2975380
user2975380

Reputation: 21

I think it may be more advantageous to e.preventDefault(); in your code than return false;...

$(".buttons").click(function(){
        $("#overlay-modal").fadeIn();
    });
    $(document).mousedown(function(e){
            var clicked = $(e.target);
        if (clicked.is('.inner-modal') || clicked.parents().is('.inner-modal')){
                e.preventDefault();
            } else { $('#overlay-modal').hide();
        }
    });
 });

This primarily has to do with event bubbling which return false does not stop.

Upvotes: 2

helion3
helion3

Reputation: 37331

The click event needs to return false, to prevent the link from sending you to the top... #

$(".buttons").click(function(){
  // your stuff
  return false;
});

Upvotes: 5

Related Questions