Question

每当我点击链接时，我想打开一个面板。我希望整个页面淡出，只有该面板可见。

我该怎么做？

由于 Kousha

Answer 1

你可以设置一个div，其位置固定在左上角，高度和宽度为100％，z-indexed高于所有内容，CSS转换或jQuery将div设置为视图。使用不透明背景，以便不显示父页面。

Answer 2

你必须准备两件事：

一个div来覆盖整个页面
您希望淡入的小组

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

Answer 3

到目前为止，我可以通过两种方式获得这种效果 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();
     });
});

如果您需要将面板代码保留在链接旁边，则可以降低内容的不透明度，例如 -

<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');
});

Demo

在此示例中，“A”div将是您的内容，“C”div将成为您的面板。 p文字说“点击我！”是你的链接。

褪色背景

4 个答案: