1

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

要么是 AddToBasketButton 点击​​事件，要么是 AskqlnkBtn 点击事件，它会打开窗口。

我的代码在 FireFox 中完美运行，但在 Internet Explorer / Chrome 中却不行。

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

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

自己看问题：

如果你想体验我网站上的代码，你可以在这里看到。. 如果您点击“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();
    });
4

1 回答 1

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");
于 2013-03-16T17:12:25.257 回答