1

ボタンをクリックするとポップアップ画面が表示されるモーダルポップアップを開発しました。

これは、AddToBasketButtonクリックイベント、またはウィンドウを開くAskqlnkBtnクリックイベントのいずれかです。

私のコードはFireFoxで完全に機能しますが、Internet Explorer/Chromeでは機能しません。

コードの実行時に目に見えるJavaScriptエラーはありません（私が知る限り）。

古いブラウザのリンクをクリックすると、画面が暗くなるため、loadPopupが何らかの形で機能する必要があります。

自分で問題を確認してください。

私のウェブサイトでコードを体験したい場合は、ここでそれを見ることができます。。「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();
    });
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 に答える