CODEWITHSUNDEEP
jquerycsscross-browsermodal-dialogsimplemodal
esoteric
esoteric

Reputation: 125

JQuery, Chrome, Safari only, modal with scrolling copy and the scroll bars off. Need to stop the background from scrolling

I have a modal 500px by 500px with the scroll bars turned off on the body of the page. Inside the modal the copy is long and contains anchor tags. My problem is that when I click the anchor tags in Chrome or Safari the body scrolls along with the modal copy anyone have a fix? It works fine in all other browsers. Below is my jQuery 

        $('.leftside .home-popup').click(function (e) {
            var os = $('.home-popup').offset();
            var top = os.top;
            var left = os.left;
            var adjustleft = left - 8;
            //call popup with no scroll bars                                                       
            var oldBodyMarginRight = $("body").css("margin-right");
            $("#benefits-modal").modal({ position: [74, adjustleft],
                onShow: function () {
                    // Turn off scroll bars 
                    var body = $("body");
                    var html = $("html");
                    var oldBodyOuterWidth = body.outerWidth(true);
                    var oldScrollTop = html.scrollTop();
                    var newBodyOuterWidth;
                    $("html").css("overflow-y", "hidden");
                    newBodyOuterWidth = $("body").outerWidth(true);
                    body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px");
                    html.scrollTop(oldScrollTop); // necessary for Firefox
                    $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px")
                },
                onClose: function () {
                    var html = $("html");
                    var oldScrollTop = html.scrollTop(); // necessary for Firefox.
                    html.css("overflow-y", "").scrollTop(oldScrollTop);
                    $("body").css("margin-right", oldBodyMarginRight);
                    $.modal.close();
                },
                overlayClose: true
            });
            $('a.modalCloseImg').css("left", "700px");
            return false;
        });

Upvotes: 1

Views: 530

Answers (1)

Seth
Seth

Reputation: 6260

body.css({
    "margin-right": (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px",
    "overflow": "hidden"
});

Then:

$("body").css({
    "margin-right": oldBodyMarginRight,
    "overflow": "auto"
});

This will set the body css to overflow:hidden which prevents scrolling in any direction.

Upvotes: 0

Related Questions