1

コンテナ（幅500px、高さ800px）があります。コンテナは背景として画像を使用し、中央に「サインアップ」というボタンを追加したいと思います。ユーザーがサインアップボタンをクリックすると、同じコンテナーにポップアップするサインアップフォームが必要です。

つまり、背景の色が別の色に変わり、同じコンテナがサインアップボックスとして使用されるロールオーバー効果が必要です。そして、ユーザーが閉じるボタンなどを押すまで、変換を維持する必要があります。

どうすればこれを達成できますか？任意のアイデアをいただければ幸いです。ありがとう！

4

1 に答える 1

2

2 つのコンテナを重ねて配置し、一番上のコンテナをフェードイン/フェードアウトさせることができます - DEMO

HTML

<section>
    <div id="lower">
        <button> Close </button>
    </div>

    <div id="upper">
        <button> Sign up </button>
    </div>
</section>

CSS

div {
    position: absolute;
    left: 20px;
    top: 20px;
    height: 300px;
    width: 400px;
    line-height: 300px;
    text-align: center;
}

#lower { background: honeydew; }
#upper { background: beige; }

jQuery

$("#upper button").on("click", function() {
    $("#upper").fadeOut(300);
});


$("#lower button").on("click", function() {
    $("#upper").fadeIn(300);
});
于 2012-11-26T21:08:16.477 に答える