html - 褪色背景

Question

每当我单击链接时，我都希望打开一个面板。我希望整个页面淡出并且只显示该面板。

我怎样才能做到这一点？

谢谢库沙

Answer 1

您可以有一个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上面写着“点击我！”的文字 是你的链接。

Answer 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 3

您可以设置一个 div，其位置固定在左上角，高度和宽度为 100%，z-indexed 高于一切，CSS 过渡或 jQuery 将 div 动画化到视图中。使用不透明的背景，使父页面不可见。

Answer 4

你必须准备两件事：

1. 覆盖整个页面的 div
2. 您要淡入的面板

单击链接后，“淡入” div 使其覆盖整个页面并淡入面板。您可能需要指定该 div 和面板的 z-index 以确保它们位于顶部。