Question

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

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

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

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

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

自己查看问题：

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

任何想法可能出错？我已经看了好几个小时了，并且没有任何线索！

我的代码：

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");

模态弹出窗口在FireFox中工作，但在其他浏览器中不起作用

1 个答案: