javascript - 模态弹出窗口适用于 FireFox，但不适用于其他浏览器

Question

我开发了一个模式弹出窗口，当单击按钮时，它会生成一个弹出屏幕。

它可以是 AddToBasketButton 单击事件，也可以是打开窗口的 AskqlnkBtn 单击事件。

我的代码在 FireFox 中运行良好，但在 Internet Explorer/Chrome 中运行不佳。

运行代码时没有可见的 JavaScript 错误(据我所知)。

在旧浏览器中单击链接时，屏幕会变暗，因此 loadPopup 必须以某种方式工作。

亲自看看问题:

如果你想体验我网站上的代码，you can see it here. 。如果您点击“Læg i kurv”按钮，那么您可以亲自尝试一下。

有什么想法可能是错误的吗？我已经看了几个小时了，但没有任何线索!

我的代码:

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

问题是由您放置元素的方式引起的。您将其定位为就好像它应该被修复一样。尝试使用它作为中心代码。

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;
};

我更改为position:fixed并删除了scrollTop。您不希望它绝对定位，因为这意味着它会随着页面滚动。

编辑:如果您仍然无法使其正常工作，请使用开发工具检查元素和相关样式以查看发生了什么，或者将其添加到函数中以查看您的情况top 和 left 设置为:

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