0

私は自分の Web アプリのランディング ページに取り組んでおり、自分で作成したある種のモーダル ボックスを使用しています。ボックス自体とオーバーレイを表示するためにいくつかの jQuery を使用します。同じページに 3 つのモーダル ボックスがあり、各ボックスに 1 つのリンクで開くことができます。

私のコードは非常にうまく機能します (重いように見えますが [私は Javascript のプロではありませんが、できる限り試してみます])。しかし、モーダル ボックスを閉じると、オーバーレイは想定どおりにスライドしますが、アニメーションは 3 回繰り返されます (おそらく 3 モーダル ボックスのコードのため)。

だから、私のコードはそこで完全にオンラインです → http://graphix.net23.net/app/

これがあなたがプレイするためのjsFiddleです:) → http://jsfiddle.net/EY59T/ (バグは実際には見えません。オーバーレイが逃げるのに時間がかかることだけがわかります)

私はすでに .stop() 関数を試しました。最初のモーダルを表示すると問題は解決しますが、別のモーダルをクリックするとオーバーレイが表示されません。

私の重いコードを見てください：

// iOS Modal
$("a#modal-open").click(function () {
      $("div#modal-ios").show("fade", 600);
      $("div.modal-overlay").show("slide", 300);
      $(".app h4").hide("fade", 300);
      $("div.app").animate({backgroundPositionY:-120}, 600);
      return false;
});
$("a#modal-done,div.modal-overlay").click(function () {
      $("div#modal-ios").hide("fade", 600);
      $("div.modal-overlay").hide("slide", 300);
      $(".app h4").show("fade", 600);
      $("div.app").animate({backgroundPositionY:0}, 600);
      return false;
});
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) {
        $("div#modal-ios,div.modal-overlay").hide("fade", 300);
        $(".app h4").show("fade", 300);
        $("div.app").animate({backgroundPositionY:0}, 600);
    }
});
// END iOS Modal
// Android Modal
$("a#modal-open-android").click(function () {
      $("div#modal-android").show("fade", 600);
      $("div.modal-overlay").show("slide", 300);
      return false;
});
$("a#modal-done,div.modal-overlay").click(function () {
      $("div#modal-android").hide("fade", 600);
      $("div.modal-overlay").hide("slide", 300);
      return false;
});
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) {
        $("div#modal-android,div.modal-overlay").hide("fade", 300);
    }
});
// END Android Modal
// WP Modal
$("a#modal-open-wp").click(function () {
      $("div#modal-wp").show("fade", 600);
      $("div.modal-overlay").show("slide", 300);
      return false;
});
$("a#modal-done,div.modal-overlay").click(function () {
      $("div#modal-wp").hide("fade", 600);
      $("div.modal-overlay").hide("slide", 300);
      return false;
});
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) {
        $("div#modal-wp,div.modal-overlay").hide("fade", 300);
    }
});
// END WP Modal​

私はそれに取り組んで2日が経ちましたが、まだ解決策が見つかりません。助けてください:)

編集: ボタンをクリックする、オーバーレイをクリックする、または ESC キーの 3 つの方法でモーダルを閉じることができます。バグは ESC キーでは発生しないことに注意してください。

4

2 に答える 2

1

これは、オーバーレイを 3 回非表示にしているために発生しています (プラットフォームごとに 1 回 [iOS、Android、WP])。

コードをきれいにする必要があります。同じ ID (#modal-close など) を持つページで複数の要素を使用しましたが、これは有効ではありません。他のインスタンスがあるかどうかはわかりません。私がここでやろうとしているのは、プラットフォームごとに作成してオブジェクトを作成し、最初にすべてにインデックスを付けて、そこから実行することです。

ただし、取得したものを変更するだけで、非表示機能を追加できます。私はここでそれをモックしました: http://jsfiddle.net/3sz2u/1/

に変更しa#modal-closeましたa.modal-close

お役に立てれば！Chrome でのみテスト済み

注: 作成した jsFiddle は、使用しているバージョンのため、同じ効果を示しません。それをjQuery 1.7.2に切り替えると、それが表示されます:)

于 2012-12-09T11:32:58.163 に答える
0

問題は、開くモデルのタイプごとに 1 つずつ、クロージング ハンドラーを 3 回バインドしていることです。ただし、それらを同じ要素にバインドしますa#modal-done,div.modal-overlay。このようにクリックすると、同じ要素で 3 つのフェードが開始され、めちゃくちゃになります。

ハンドラーを一度だけ適用する必要があり、そこにすべてのポップアップのフェードを追加するだけです..

また、ポップアップを開くためのリンクに共通のクラスを追加することで、それらを単一のパスでターゲットにすることもできます

これらはあなたのコードを単純化します

// method to hide any open popup and the overlay
function closePopupOverlay() {
    // hide all popups - will only really work with the currently open one
    $("#modal-ios,#modal-wp,#modal-android,div.modal-overlay").hide("fade", 500);

    $(".app h4").show("fade", 500);
    $("div.app").animate({
        backgroundPositionY: 0
    }, 600);
}
$(document).on('keydown', function(e) {
    if (e.keyCode === 27) {
        closePopupOverlay();
    }
});
$("a#modal-done,div.modal-overlay").click(function() {
    closePopupOverlay();
    return false;
});
// when we click on one of the links 
$('.model-open').click(function() {
    var target = this.id.replace('-open-', '-'); // find the related popup id
    $('#' + target).show("fade", 600); // show the related popup
    $("div.modal-overlay").show("slide", 300); // show the overlay

    if (target === 'modal-ios') { // handle the special needs of the ios button
        $(".app h4").hide("fade", 300);
        $("div.app").animate({
            backgroundPositionY: -120
        }, 600);
    }

    return false;
});

html の変更はclass="model-open"、3 つのリンクに追加しid、ios リンクをmodal-open-ios他の 2 つと一致するように変更したことです。そのため、開きたいポップアップを簡単に抽出できます。

http://jsfiddle.net/EY59T/1/のデモ

于 2012-12-09T11:34:16.053 に答える