-1

ページの読み込み時に自動的に読み込まれるオーバーレイ ボックスを作成し、ユーザーがクリックして消える [OK] ボタンを表示する方法を見つけようとしています。

これに似たものを探していますhttp://laurenconrad.com/

ピンクの半透明の背景と中央にサインアップ ボックスが表示されたオーバーレイがどのように表示されるかを確認してください。ただし、それは毎回表示されるわけではありません。週に1回だけだと思います。サイト訪問者が購読するオプションを提供するために、それに似たものを探しています。

さまざまなチュートリアルに従おうとしましたが、うまく機能していないようです。オーバーレイやスクリプトについてはよく知らないので、CSS、HTMl、およびスクリプトに関するヘルプは非常に役立ちます。ありがとうございました！

レベッカ

4

2 に答える 2

2

これを行うには、jQuery を使用します。HTML/CSS でオーバーレイを作成し、タグの先頭にオーバーレイ div を配置します。

$(document).ready(function() {
    // check cookie
    var visited = $.cookie("visited")

    // load overlay if they haven't visited
    if (visited == null) {
        $('#overlay').fadeIn();     
        $.cookie('visited', 'yes');  
    }

    // set cookie
    $.cookie('visited', 'yes', { expires: 1, path: '/' });
});

$('button').click(function () {
    $('#overlay').fadeOut(200, "linear");
});

このコードは、ID「overlay」で div をロードし、非表示ボタンをクリックすると、div がフェードアウトします。必要に応じて、オーバーレイ div をクリックするだけで div をフェードアウトさせることができます。これを使用して：

$('#overlay').click(function () {
    $('#overlay').fadeOut(200, "linear");
});

ここに私が何を意味するかを示すフィドルがあります： http://jsfiddle.net/andaywells/jWcqZ/17/

于 2013-08-30T20:50:27.543 に答える
1

ページにロードされているが非表示になっているオーバーレイから始めます。

次に、jQ の dom on ready イベントを使用してオーバーレイを表示します。

これは、実行できる最も単純なオーバーレイです: http://jsfiddle.net/ninty9notout/6gaND/

$('#overlay').css({'opacity': 0, 'display': "block"});
$('#overlay').animate({'opacity': 1}, 1000).on("click", function() {
    $('#overlay').animate({'opacity': 0}, 1000);
});

楽しみ！

于 2013-08-30T20:54:28.717 に答える