1

次の関数があります。

showModal(data);

呼び出されると、渡されたコンテンツでモーダルが作成されます。中央に配置しようとしましたが、「これ」が正しいオブジェクトを参照しているとは思いません。

function showModal(data){
    $("<div class = 'modal'>").css({
        "z-index": Number($("#overlay1").css("z-index")) + 5,
        top: $(window).height() / 2 - $(this).height() / 2,
        left: $(window).width() / 2 - $(this).width() / 2
    }).append(data).appendTo("body").fadeIn();
}

画面上で 0,0 のままにします。どうすれば調整できますか？

4

3 に答える 3

3

これを試して：

function showModal(data){
    var modal = $("<div class = 'modal'>");
    modal.css({
        "z-index": Number($("#overlay1").css("z-index")) + 5,
        top: $(window).height() / 2 - modal.height() / 2,
        left: $(window).width() / 2 - modal.width() / 2
    }).append(data).appendTo("body").fadeIn();
}

あなたの文脈でthisは、私が考える機能を指しshowModalます。しかし、クラス「モーダル」で新しく作成されたdivを参照しようとしています。呼び出しは内部.cssへの参照を変更しないため、参照を保存する必要があります。this通常のイベント バインディングを考えていると思います。このバインディングに渡す無名関数には、jQuerythisが問題の要素として定義する新しいコンテキストがあります。では、コールバックを提供していないため、新しいスコープ/コンテキストがないcssため、jQuery を変更または設定する方法はありません。thisおそらく間違った用語 (コンテキスト、スコープなど) を使用しています...

更新：

問題は、呼び出しの前に が追加されなかったため、モーダルに実質的な幅/高さがないことにもあるようです。呼び出しの前にボディにモーダルを追加する必要があるかどうかはわかりませんが、それも役立つかもしれません。data.css.css

function showModal(data) {
    var modal = $("<div class='modal'>");
    modal.appendTo("body")
        .append(data)
        .css({
            "z-index": +$("#overlay1").css("z-index") + 5,
            top: $(window).height() / 2 - modal.height() / 2,
            left: $(window).width() / 2 - modal.width() / 2
        })
        .fadeIn();
}
于 2012-11-01T20:29:16.913 に答える
0

モーダルの位置プロパティは絶対でなければなりません。

于 2012-11-01T20:34:37.663 に答える
0

おそらく追加する必要positionもあります。別の問題として、コンテンツがまだ追加されていないため、高さがありません。

また、モーダル div オンロードを追加し、ビューポートの外に移動してから、実行時に正しく配置しますshowModal。そうしないと、毎回新しい DIV を追加することになります。

コードのもう 1 つの問題は、ウィンドウのサイズを変更するときにモーダルが中央に配置されないことですが、50%マージンを使用して CSS で修正できます。

別の解決策は、CSS と JavaScript の組み合わせです。

var $modal = $("<div class='modal'>").css('left',-10000).appendTo('body'),
    zIndex;

function showModal(data){
    zIndex = parseInt($("#overlay1").css("z-index"), 10)+5;
    $modal.append(data).css({
        left: $modal.width()/-2,
        top: $modal.height()/-2,
        zIndex: zIndex,
        opacity: 0
    }).animate({ opacity: 1 });
}

function hideModal() {
    $modal.css('left',-10000);
}

そしてCSS：

.modal{ position: fixed; margin-top: 50%; margin-left: 50% }

このように、モーダルは最初は左端に配置されるため、表示する前に幅/高さを計算できます。

于 2012-11-01T20:38:45.283 に答える