html - 薄れゆく背景

Question

リンクをクリックするたびにパネルが開くようにしたい。ページ全体をフェードアウトさせ、そのパネルのみを表示させたい。

どうやってやるの？

ありがとうコウシャ

Answer 1

位置を左上隅に固定し、高さと幅を 100% にし、z インデックスをすべてより高く設定し、CSS トランジションまたは jQuery で div をビューにアニメーション化して、div を設定できます。親ページが表示されないように、不透明な背景を使用します。

Answer 2

あなたは2つのことを準備する必要があります：

1. ページ全体をカバーする div
2. フェードインしたいパネル

リンクをクリックすると、div が「フェードイン」して、ページ全体をカバーし、パネルにもフェードインします。その div とパネルの z-index を指定して、それらが一番​​上にあることを確認する必要がある場合があります。

Answer 3

私が知る限り、この効果は2つの方法で実現できます1.最初の方法では、コンテンツとパネルを次のように分離する必要があります-

<div id="container">
    <div id="content">
        <!-- your content goes here -->
        <a href="" id="link">link</a>
    </div>
    <div id="panel">
        <!-- your panel code goes here-->
    </div>
</div>

パネルをコンテナに完全に尊重して配置し、jQueryを使用して次のようにコンテンツをフェードアウトしますdiv-

$(document).ready(function(){
     $('#link').on('click',function(){
          $('#panel').show();
          $('#content').hide();
     });
});

1. パネルコードをリンクの横に保持する必要がある場合は、次のようにコンテンツの不透明度を下げることができます-

   <div id="container">
       <div id="content">
           <!-- your content goes here -->
           <a href="" id="link">Link</a>
       </div>
       <div id="panel">
           <!-- your panel code goes here-->
       </div>
   </div>
   

そしてjQuery-

    $(document).ready(function(){
         $('#link').on('click',function(){
              $('#panel').show();
              $('#content').css('opacity','0');
         });
    });

これは大まかなコードで、多くのことを省略しています。思いついたときにお分かりいただければ幸いです。ありがとう

Answer 4

divページのコンテンツを含む と、パネルのコンテンツを含む を作成できます。おそらく、パネルをページ上の絶対位置または固定位置に配置したいと思うでしょう。その後、フェードをトリガーしたいイベントに JavaScript/jQuery の関数をアタッチするだけで、ページ コンテンツとパネルの不透明度または表示を変更できます。以下は例です。

HTML:

<div id="A">
    <div id="B">
        <p id="1">Click Me!</p>
    </div>
</div>

<div id="C"><p id="2">Click Me!</p></div>

CSS:

p {
    cursor: pointer;
}
#A {
    height: 400px;
    width: 300px;
    background: grey;
}
#B {
    height: 200px;
    width: 300px;
    background: red;
}
#C {
    height: 100px;
    width: 200px;
    background: blue;
    position: absolute;
    top: 50px;
    left: 50px;
    display: none;
}

jQuery:

$('#1').click(function(){
    $('#A').fadeOut('slow');
    $('#C').fadeIn('slow');
});

$('#2').click(function() {
    $('#C').fadeOut('slow');
    $('#A').fadeIn('slow');
});

デモ

この例では、「A」divがコンテンツ、「C」divがパネルになります。p「Click Me!」というテキスト。あなたのリンクです。