Set div position fixed without page jumping up

Question

I have a modal dialog (jquery.dialog) that opens up when a user clicks on a link. I want to hide the scroll bar on the page behind the dialog, so user will not be able to use it. This works perfectly fine with the overflow:hidden except older IE browsers that mess the entire page up when doing that.

So I came up with this to make it work in the IE: I created a div that was covering the entire content of the page and set it to position:relative and width/height:100%. Then anytime, the modal dialog opens up, the position gets set to fixed. That makes the overwflow:hidden work in old IE.

Now, the other problem came up. When the user is at the bottom of the page and clicks on the links, dialog pops up, but the main page jumps up to the top.

I want the main page to stay intact if possible. How can I do so?

Thank you.

The code to show/close the dialog:

show:

$('#allContent').css({ position: "fixed" });

$('#viewJobPanel').dialog('open');

$('#allContent').css('overflow', 'hidden');

close:

$('#allContent').css('overflow', 'visible');
$('#allContent').css({ position: "relative" });
$('#viewJobPanel').dialog('destroy');

and when user clicks on the link, I have this event handlers

e.preventDefault();
e.stopPropagation();

Answer 1

使用绑定到click事件的span而不是锚元素，可以避免重新放置窗口顶部的默认行为。