Modal popup works in FireFox but not other browers

Question

I've developed a modal popup, which makes a popup screen, when clicking on a button.

It's either the AddToBasketButton click event, or the AskqlnkBtn click event which will open the window.

My code works perfectly in FireFox, but not in Internet Explorer / Chrome.

There is no visible JavaScript errors when running the code (as far as I can tell).

When clicking the links in the old browsers, the screen gets darkened, so the loadPopup must work somehow.

See the problem yourself:

If you want to experience the code on my website, you can see it here. . If you go down to the "Læg i kurv" button, then you can try it out for yourselves.

Any ideas what could be wrong? I've been looking at it for some hours, and have no clue!

My code :

function loadPopup() {
        //loads popup only if it is disabled  
        if ($('#<%=bgPopup.ClientID %>').data("state") == 0) {
            $('#<%=bgPopup.ClientID %>').css({
                "opacity": "0.7"
            });
            $('#<%=bgPopup.ClientID %>').fadeIn("medium");
            $('#<%=ReportError.ClientID%>').fadeIn("medium");
            $('#<%=bgPopup.ClientID %>').data("state", 1);
        }
    }

    function disablePopup() {
        if ($('#<%=bgPopup.ClientID %>').data("state") == 1) {
            $('#<%=bgPopup.ClientID %>').fadeOut("medium");
            $('#<%=ReportError.ClientID %>').fadeOut("medium");
            $('#<%=bgPopup.ClientID %>').data("state", 0);
        }
    }

    function setOrdering() {
        $("#contact-headline").text('Bestil produkt');
        $("#contact-messagelbl").text('Evt. kommentar');
        $('#<%=ContactTypeHiddenLbl.ClientID %>').val("bestil");
    }

    function setQuestions() {
        $("#contact-headline").text('Stil spørgsmål');
        $("#contact-messagelbl").text('Indtast dit spørgsmål');
        $('#<%=ContactTypeHiddenLbl.ClientID %>').val("spørgsmål");
    }

    function centerPopup() {
        $('#<%=ReportError.ClientID%>').center();
    }

    function resetContactControls() {
        $('#<%=ContactMailBox.ClientID %>').val('');
        $('#<%=ContactPhoneBox.ClientID %>').val('');
        $('#<%=ReportMessageBox.ClientID %>').val('');
        $('#<%=AskQuestionProductBtn.ClientID %>').show();
        $('#contact-statuslbl').val('');
    }

    jQuery.fn.center = function () {
        this.css("position", "absolute");
        this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
            $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
            $(window).scrollLeft()) + "px");
        return this;
    };

    $(document).ready(function() {
        var mouseIsInside = true;

        $('#<%=ReportError.ClientID%>').hover(function () {
            mouseIsInside = true;
        }, function () {
            mouseIsInside = false;
        });

        $("body").mouseup(function () {
            if (!mouseIsInside) {
                disablePopup();
            }
        });

    });

        $('#<%=bgPopup.ClientID %>').data("state", 0);

        $('#<%=AddToBasketButton.ClientID %>').click(function () {
            resetContactControls();
            centerPopup();
            loadPopup();
            setOrdering();
        });

        $('#<%=AskqlnkBtn.ClientID %>').click(function () {
            resetContactControls();
            centerPopup();
            loadPopup();
            setQuestions();
        });

        $('#<%=PopupCloseLnk.ClientID %>').click(function () {
            disablePopup();
        });

        $(document).keypress(function (e) {
            if (e.keyCode == 27) {
                disablePopup();
            }
        });


    $(window).resize(function () {
        centerPopup();
    });

Answer 1

The problem is being caused by how you are positioning the element. You are positioning it sort of as if it was supposed to be fixed. Try using this for the center code.

jQuery.fn.center = function () {
    this.css("position", "fixed");
    this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + "px");
    this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + "px");
    return this;
};

I changed to position:fixed and removed scrollTop . You don't want it positioned absolutely as that would mean it would scroll with the page.

EDIT: If you're still having trouble getting it working either use the dev tools to inspect the element and related styles to see what is going on or add this to the function to see what your top and left are being set to:

alert(Math.max(0, (($(window).height() - this.outerHeight()) / 2) + "px");
alert(Math.max(0, (($(window).width() - this.outerWidth()) / 2) + "px");