Prevent Background Scrolling When Displaying Popup

I have a form that is displayed in a popup. After loading, the background is grayed out, but the user can still scroll the background content up and down.

How do I prevent the background from scrolling?

Example here

the 'email this quote' link to the right of the pdf screenshot.

edited Oct 27 '18 at 18:28

Alex.K.

2,19992835

asked Feb 4 '10 at 17:53

Joe

3384718

add a comment |

I have a form that is displayed in a popup. After loading, the background is grayed out, but the user can still scroll the background content up and down.

How do I prevent the background from scrolling?

Example here

the 'email this quote' link to the right of the pdf screenshot.

edited Oct 27 '18 at 18:28

Alex.K.

2,19992835

asked Feb 4 '10 at 17:53

Joe

3384718

add a comment |

I have a form that is displayed in a popup. After loading, the background is grayed out, but the user can still scroll the background content up and down.

How do I prevent the background from scrolling?

Example here

the 'email this quote' link to the right of the pdf screenshot.

edited Oct 27 '18 at 18:28

Alex.K.

2,19992835

asked Feb 4 '10 at 17:53

Joe

3384718

I have a form that is displayed in a popup. After loading, the background is grayed out, but the user can still scroll the background content up and down.

How do I prevent the background from scrolling?

Example here

the 'email this quote' link to the right of the pdf screenshot.

jquery html popup

edited Oct 27 '18 at 18:28

Alex.K.

2,19992835

asked Feb 4 '10 at 17:53

Joe

3384718

edited Oct 27 '18 at 18:28

Alex.K.

2,19992835

asked Feb 4 '10 at 17:53

Joe

3384718

edited Oct 27 '18 at 18:28

Alex.K.

2,19992835

edited Oct 27 '18 at 18:28

Alex.K.

2,19992835

edited Oct 27 '18 at 18:28

Alex.K.

2,19992835

asked Feb 4 '10 at 17:53

Joe

3384718

asked Feb 4 '10 at 17:53

Joe

3384718

asked Feb 4 '10 at 17:53

Joe

3384718

add a comment |

5 Answers
5

active

oldest

votes

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

Your best bet is to move your click event handlers to a separate file and do the binding there:

$(function() {

    $('.emailPost').click(function() {

        $(window).scroll(function() { return false; });

        pageTracker._trackPageview('/onclick/emailquote');            

    });

});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

answered Feb 4 '10 at 18:00

Tatu Ulmanen

97.7k26165177

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

– Joe
Feb 4 '10 at 18:18

doesn't work in safari 4 and firefox 3.5.7.

– DataGreed
Feb 5 '10 at 10:53

1

I have the same situation. This is a nice solution, as it does lock the scroll in FF24.0, but it still allows the page to move using end/home/pageup/pagedown; also, it does not appear to work in IE8. I haven't tested it further than those two browsers, but the above comment seems to show that this question needs some work.

– Thomas
Oct 9 '13 at 15:34

add a comment |

To hide the scrollbar of the body when opening the popup

document.body.style.overflow = "hidden";

and to revert back when closing the popup

document.body.style.overflow = "visible";

edited Jan 1 at 12:21

Akash Patel

174

answered Aug 17 '12 at 11:55

sudhAnsu63

4,38832843

Assigning overflow hidden will cause the scroll bar to disappear, thus changing the page width. This does not disable the scroll bar, though it does prevent scrolling from occurring.

– Thomas
Oct 9 '13 at 15:15

2

i like this solution :)

– jondinham
Oct 16 '13 at 1:47

Your solution works but when you close the Pop-up and again enable It scroll it is also giving horizontal scroll. Which is not required.

– Sunil Pachlangia
Oct 26 '17 at 12:24

add a comment |

Don't use the # tag in your links!

It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.

Edit your links to:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(notice the href="")

answered Feb 4 '10 at 17:55

Farlock85

1,56332959

1

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use return false; at the end of the handler function. crisp.tweakblogs.net/blog/313/…

– Tatu Ulmanen
Feb 4 '10 at 17:59

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

– Joe
Feb 4 '10 at 18:01

Yeah, you still will have to use return false ofcourse! But that is really basic JS ;) <a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a> Will work fine.

– Farlock85
Feb 4 '10 at 18:02

What about "javascript:void(0);"?

– user216441
Feb 4 '10 at 18:04

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the bare minimum -- some low traffic sites don't care about such things, obviously.

– BryanH
Feb 4 '10 at 20:49

add a comment |

This code block works for IOS mobile devices where the scroll issue is very common.

$('body').on('touchmove', function(e) {

    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();

});

$('body').on('shown.bs.modal', function() {

    $(this).addClass('scroll-disable');

});

$('body').on('hidden.bs.modal', function() {

    $(this).removeClass('scroll-disable');

});

edited Jul 17 '17 at 11:16

emix

6,56942949

answered Jul 17 '17 at 10:40

Madhuri Kulkarni

565

add a comment |

-1

If you are using it like this

<a href="#targetid">Open Model</a>

(#tragetid) is the div popup id.

You can use and replace href="" with data-mfp-src="". It's working perfectly.

edited Oct 27 '18 at 9:23

Artjom B.

53k1780148

answered Oct 27 '18 at 9:05

Rajan Gupta

I don't see how this answers the question. Is this supposed to be a comment to another answer?

– Artjom B.
Oct 27 '18 at 9:24

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f2201932%2fprevent-background-scrolling-when-displaying-popup%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

Your best bet is to move your click event handlers to a separate file and do the binding there:

$(function() {

    $('.emailPost').click(function() {

        $(window).scroll(function() { return false; });

        pageTracker._trackPageview('/onclick/emailquote');            

    });

});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

answered Feb 4 '10 at 18:00

Tatu Ulmanen

97.7k26165177

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

– Joe
Feb 4 '10 at 18:18

doesn't work in safari 4 and firefox 3.5.7.

– DataGreed
Feb 5 '10 at 10:53

1

I have the same situation. This is a nice solution, as it does lock the scroll in FF24.0, but it still allows the page to move using end/home/pageup/pagedown; also, it does not appear to work in IE8. I haven't tested it further than those two browsers, but the above comment seems to show that this question needs some work.

– Thomas
Oct 9 '13 at 15:34

add a comment |

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

Your best bet is to move your click event handlers to a separate file and do the binding there:

$(function() {

    $('.emailPost').click(function() {

        $(window).scroll(function() { return false; });

        pageTracker._trackPageview('/onclick/emailquote');            

    });

});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

answered Feb 4 '10 at 18:00

Tatu Ulmanen

97.7k26165177

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

– Joe
Feb 4 '10 at 18:18

doesn't work in safari 4 and firefox 3.5.7.

– DataGreed
Feb 5 '10 at 10:53

1

I have the same situation. This is a nice solution, as it does lock the scroll in FF24.0, but it still allows the page to move using end/home/pageup/pagedown; also, it does not appear to work in IE8. I haven't tested it further than those two browsers, but the above comment seems to show that this question needs some work.

– Thomas
Oct 9 '13 at 15:34

add a comment |

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

Your best bet is to move your click event handlers to a separate file and do the binding there:

$(function() {

    $('.emailPost').click(function() {

        $(window).scroll(function() { return false; });

        pageTracker._trackPageview('/onclick/emailquote');            

    });

});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

answered Feb 4 '10 at 18:00

Tatu Ulmanen

97.7k26165177

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

Your best bet is to move your click event handlers to a separate file and do the binding there:

$(function() {

    $('.emailPost').click(function() {

        $(window).scroll(function() { return false; });

        pageTracker._trackPageview('/onclick/emailquote');            

    });

});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

answered Feb 4 '10 at 18:00

Tatu Ulmanen

97.7k26165177

answered Feb 4 '10 at 18:00

Tatu Ulmanen

97.7k26165177

answered Feb 4 '10 at 18:00

Tatu Ulmanen

97.7k26165177

answered Feb 4 '10 at 18:00

Tatu Ulmanen

97.7k26165177

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

– Joe
Feb 4 '10 at 18:18

doesn't work in safari 4 and firefox 3.5.7.

– DataGreed
Feb 5 '10 at 10:53

1

I have the same situation. This is a nice solution, as it does lock the scroll in FF24.0, but it still allows the page to move using end/home/pageup/pagedown; also, it does not appear to work in IE8. I haven't tested it further than those two browsers, but the above comment seems to show that this question needs some work.

– Thomas
Oct 9 '13 at 15:34

add a comment |

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

– Joe
Feb 4 '10 at 18:18

doesn't work in safari 4 and firefox 3.5.7.

– DataGreed
Feb 5 '10 at 10:53

1

I have the same situation. This is a nice solution, as it does lock the scroll in FF24.0, but it still allows the page to move using end/home/pageup/pagedown; also, it does not appear to work in IE8. I haven't tested it further than those two browsers, but the above comment seems to show that this question needs some work.

– Thomas
Oct 9 '13 at 15:34

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

– Joe
Feb 4 '10 at 18:18

doesn't work in safari 4 and firefox 3.5.7.

– DataGreed
Feb 5 '10 at 10:53

I have the same situation. This is a nice solution, as it does lock the scroll in FF24.0, but it still allows the page to move using end/home/pageup/pagedown; also, it does not appear to work in IE8. I haven't tested it further than those two browsers, but the above comment seems to show that this question needs some work.

– Thomas
Oct 9 '13 at 15:34

add a comment |

To hide the scrollbar of the body when opening the popup

document.body.style.overflow = "hidden";

and to revert back when closing the popup

document.body.style.overflow = "visible";

edited Jan 1 at 12:21

Akash Patel

174

answered Aug 17 '12 at 11:55

sudhAnsu63

4,38832843

Assigning overflow hidden will cause the scroll bar to disappear, thus changing the page width. This does not disable the scroll bar, though it does prevent scrolling from occurring.

– Thomas
Oct 9 '13 at 15:15

2

i like this solution :)

– jondinham
Oct 16 '13 at 1:47

Your solution works but when you close the Pop-up and again enable It scroll it is also giving horizontal scroll. Which is not required.

– Sunil Pachlangia
Oct 26 '17 at 12:24

add a comment |

To hide the scrollbar of the body when opening the popup

document.body.style.overflow = "hidden";

and to revert back when closing the popup

document.body.style.overflow = "visible";

edited Jan 1 at 12:21

Akash Patel

174

answered Aug 17 '12 at 11:55

sudhAnsu63

4,38832843

Assigning overflow hidden will cause the scroll bar to disappear, thus changing the page width. This does not disable the scroll bar, though it does prevent scrolling from occurring.

– Thomas
Oct 9 '13 at 15:15

2

i like this solution :)

– jondinham
Oct 16 '13 at 1:47

Your solution works but when you close the Pop-up and again enable It scroll it is also giving horizontal scroll. Which is not required.

– Sunil Pachlangia
Oct 26 '17 at 12:24

add a comment |

To hide the scrollbar of the body when opening the popup

document.body.style.overflow = "hidden";

and to revert back when closing the popup

document.body.style.overflow = "visible";

edited Jan 1 at 12:21

Akash Patel

174

answered Aug 17 '12 at 11:55

sudhAnsu63

4,38832843

To hide the scrollbar of the body when opening the popup

document.body.style.overflow = "hidden";

and to revert back when closing the popup

document.body.style.overflow = "visible";

edited Jan 1 at 12:21

Akash Patel

174

answered Aug 17 '12 at 11:55

sudhAnsu63

4,38832843

edited Jan 1 at 12:21

Akash Patel

174

edited Jan 1 at 12:21

Akash Patel

174

edited Jan 1 at 12:21

Akash Patel

174

answered Aug 17 '12 at 11:55

sudhAnsu63

4,38832843

answered Aug 17 '12 at 11:55

sudhAnsu63

4,38832843

answered Aug 17 '12 at 11:55

sudhAnsu63

4,38832843

Assigning overflow hidden will cause the scroll bar to disappear, thus changing the page width. This does not disable the scroll bar, though it does prevent scrolling from occurring.

– Thomas
Oct 9 '13 at 15:15

2

i like this solution :)

– jondinham
Oct 16 '13 at 1:47

Your solution works but when you close the Pop-up and again enable It scroll it is also giving horizontal scroll. Which is not required.

– Sunil Pachlangia
Oct 26 '17 at 12:24

add a comment |

Assigning overflow hidden will cause the scroll bar to disappear, thus changing the page width. This does not disable the scroll bar, though it does prevent scrolling from occurring.

– Thomas
Oct 9 '13 at 15:15

2

i like this solution :)

– jondinham
Oct 16 '13 at 1:47

Your solution works but when you close the Pop-up and again enable It scroll it is also giving horizontal scroll. Which is not required.

– Sunil Pachlangia
Oct 26 '17 at 12:24

Assigning overflow hidden will cause the scroll bar to disappear, thus changing the page width. This does not disable the scroll bar, though it does prevent scrolling from occurring.

– Thomas
Oct 9 '13 at 15:15

i like this solution :)

– jondinham
Oct 16 '13 at 1:47

Your solution works but when you close the Pop-up and again enable It scroll it is also giving horizontal scroll. Which is not required.

– Sunil Pachlangia
Oct 26 '17 at 12:24

add a comment |

Don't use the # tag in your links!

It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.

Edit your links to:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(notice the href="")

answered Feb 4 '10 at 17:55

Farlock85

1,56332959

1

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use return false; at the end of the handler function. crisp.tweakblogs.net/blog/313/…

– Tatu Ulmanen
Feb 4 '10 at 17:59

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

– Joe
Feb 4 '10 at 18:01

Yeah, you still will have to use return false ofcourse! But that is really basic JS ;) <a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a> Will work fine.

– Farlock85
Feb 4 '10 at 18:02

What about "javascript:void(0);"?

– user216441
Feb 4 '10 at 18:04

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the bare minimum -- some low traffic sites don't care about such things, obviously.

– BryanH
Feb 4 '10 at 20:49

add a comment |

Don't use the # tag in your links!

It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.

Edit your links to:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(notice the href="")

answered Feb 4 '10 at 17:55

Farlock85

1,56332959

1

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use return false; at the end of the handler function. crisp.tweakblogs.net/blog/313/…

– Tatu Ulmanen
Feb 4 '10 at 17:59

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

– Joe
Feb 4 '10 at 18:01

Yeah, you still will have to use return false ofcourse! But that is really basic JS ;) <a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a> Will work fine.

– Farlock85
Feb 4 '10 at 18:02

What about "javascript:void(0);"?

– user216441
Feb 4 '10 at 18:04

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the bare minimum -- some low traffic sites don't care about such things, obviously.

– BryanH
Feb 4 '10 at 20:49

add a comment |

Don't use the # tag in your links!

It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.

Edit your links to:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(notice the href="")

answered Feb 4 '10 at 17:55

Farlock85

1,56332959

Don't use the # tag in your links!

It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.

Edit your links to:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(notice the href="")

answered Feb 4 '10 at 17:55

Farlock85

1,56332959

answered Feb 4 '10 at 17:55

Farlock85

1,56332959

answered Feb 4 '10 at 17:55

Farlock85

1,56332959

answered Feb 4 '10 at 17:55

Farlock85

1,56332959

1

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use return false; at the end of the handler function. crisp.tweakblogs.net/blog/313/…

– Tatu Ulmanen
Feb 4 '10 at 17:59

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

– Joe
Feb 4 '10 at 18:01

Yeah, you still will have to use return false ofcourse! But that is really basic JS ;) <a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a> Will work fine.

– Farlock85
Feb 4 '10 at 18:02

What about "javascript:void(0);"?

– user216441
Feb 4 '10 at 18:04

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the bare minimum -- some low traffic sites don't care about such things, obviously.

– BryanH
Feb 4 '10 at 20:49

add a comment |

1

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use return false; at the end of the handler function. crisp.tweakblogs.net/blog/313/…

– Tatu Ulmanen
Feb 4 '10 at 17:59

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

– Joe
Feb 4 '10 at 18:01

Yeah, you still will have to use return false ofcourse! But that is really basic JS ;) <a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a> Will work fine.

– Farlock85
Feb 4 '10 at 18:02

What about "javascript:void(0);"?

– user216441
Feb 4 '10 at 18:04

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the bare minimum -- some low traffic sites don't care about such things, obviously.

– BryanH
Feb 4 '10 at 20:49

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use return false; at the end of the handler function. crisp.tweakblogs.net/blog/313/…

– Tatu Ulmanen
Feb 4 '10 at 17:59

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

– Joe
Feb 4 '10 at 18:01

Yeah, you still will have to use return false ofcourse! But that is really basic JS ;)

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a>

Will work fine.

– Farlock85
Feb 4 '10 at 18:02

Yeah, you still will have to use return false ofcourse! But that is really basic JS ;)

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a>

Will work fine.

– Farlock85
Feb 4 '10 at 18:02

What about "javascript:void(0);"?

– user216441
Feb 4 '10 at 18:04

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the bare minimum -- some low traffic sites don't care about such things, obviously.

– BryanH
Feb 4 '10 at 20:49

add a comment |

This code block works for IOS mobile devices where the scroll issue is very common.

$('body').on('touchmove', function(e) {

    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();

});

$('body').on('shown.bs.modal', function() {

    $(this).addClass('scroll-disable');

});

$('body').on('hidden.bs.modal', function() {

    $(this).removeClass('scroll-disable');

});

edited Jul 17 '17 at 11:16

emix

6,56942949

answered Jul 17 '17 at 10:40

Madhuri Kulkarni

565

add a comment |

This code block works for IOS mobile devices where the scroll issue is very common.

$('body').on('touchmove', function(e) {

    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();

});

$('body').on('shown.bs.modal', function() {

    $(this).addClass('scroll-disable');

});

$('body').on('hidden.bs.modal', function() {

    $(this).removeClass('scroll-disable');

});

edited Jul 17 '17 at 11:16

emix

6,56942949

answered Jul 17 '17 at 10:40

Madhuri Kulkarni

565

add a comment |

This code block works for IOS mobile devices where the scroll issue is very common.

$('body').on('touchmove', function(e) {

    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();

});

$('body').on('shown.bs.modal', function() {

    $(this).addClass('scroll-disable');

});

$('body').on('hidden.bs.modal', function() {

    $(this).removeClass('scroll-disable');

});

edited Jul 17 '17 at 11:16

emix

6,56942949

answered Jul 17 '17 at 10:40

Madhuri Kulkarni

565

This code block works for IOS mobile devices where the scroll issue is very common.

$('body').on('touchmove', function(e) {

    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();

});

$('body').on('shown.bs.modal', function() {

    $(this).addClass('scroll-disable');

});

$('body').on('hidden.bs.modal', function() {

    $(this).removeClass('scroll-disable');

});

edited Jul 17 '17 at 11:16

emix

6,56942949

answered Jul 17 '17 at 10:40

Madhuri Kulkarni

565

edited Jul 17 '17 at 11:16

emix

6,56942949

edited Jul 17 '17 at 11:16

emix

6,56942949

edited Jul 17 '17 at 11:16

emix

6,56942949

answered Jul 17 '17 at 10:40

Madhuri Kulkarni

565

answered Jul 17 '17 at 10:40

Madhuri Kulkarni

565

answered Jul 17 '17 at 10:40

Madhuri Kulkarni

565

add a comment |

-1

If you are using it like this

<a href="#targetid">Open Model</a>

(#tragetid) is the div popup id.

You can use and replace href="" with data-mfp-src="". It's working perfectly.

edited Oct 27 '18 at 9:23

Artjom B.

53k1780148

answered Oct 27 '18 at 9:05

Rajan Gupta

I don't see how this answers the question. Is this supposed to be a comment to another answer?

– Artjom B.
Oct 27 '18 at 9:24

add a comment |

-1

If you are using it like this

<a href="#targetid">Open Model</a>

(#tragetid) is the div popup id.

You can use and replace href="" with data-mfp-src="". It's working perfectly.

edited Oct 27 '18 at 9:23

Artjom B.

53k1780148

answered Oct 27 '18 at 9:05

Rajan Gupta

I don't see how this answers the question. Is this supposed to be a comment to another answer?

– Artjom B.
Oct 27 '18 at 9:24

add a comment |

-1

If you are using it like this

<a href="#targetid">Open Model</a>

(#tragetid) is the div popup id.

You can use and replace href="" with data-mfp-src="". It's working perfectly.

edited Oct 27 '18 at 9:23

Artjom B.

53k1780148

answered Oct 27 '18 at 9:05

Rajan Gupta

If you are using it like this

<a href="#targetid">Open Model</a>

(#tragetid) is the div popup id.

You can use and replace href="" with data-mfp-src="". It's working perfectly.

edited Oct 27 '18 at 9:23

Artjom B.

53k1780148

answered Oct 27 '18 at 9:05

Rajan Gupta

edited Oct 27 '18 at 9:23

Artjom B.

53k1780148

edited Oct 27 '18 at 9:23

Artjom B.

53k1780148

edited Oct 27 '18 at 9:23

Artjom B.

53k1780148

answered Oct 27 '18 at 9:05

Rajan Gupta

answered Oct 27 '18 at 9:05

Rajan Gupta

answered Oct 27 '18 at 9:05

Rajan Gupta

I don't see how this answers the question. Is this supposed to be a comment to another answer?

– Artjom B.
Oct 27 '18 at 9:24

add a comment |

I don't see how this answers the question. Is this supposed to be a comment to another answer?

– Artjom B.
Oct 27 '18 at 9:24

I don't see how this answers the question. Is this supposed to be a comment to another answer?

– Artjom B.
Oct 27 '18 at 9:24

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk