Question

我正在我的个人网站上工作，并希望做类似的事情：

http://aliwilliams.co.uk/

正如您所看到的，当您点击＆＃34;个人资料＆＃34;按钮另一层（div）覆盖整个页面。我想做类似（和响应）的事情，我可以添加像＆＃34;关于＆＃34;部分，联系表格和其他小部件。

感谢帮助。

Answer 1

在你的HTML中：

<a href="#" id="overlay-button">Overlay Button</a>
<div id="overlay" class="overlay">Overlay Stuff</div>

然后在css中执行此操作：

#overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50;
}

.overlay {
    opacity: 0;
}

.show {
    opacity: 1;
}

#overlay-button {
    position: fixed;
    top: 20%; /* Wherever you want it to be */
    left: 20%;
    z-index: 100;
}

然后使用这个jQuery：

$('#overlay-button').click(function(){
     $('#overlay').toggleClass('show');
});

Answer 2

使用javascript或使用jquery轻松。点击按钮$('#buttonid').click(function({//fadeIn here});

您显示隐藏的$('#divid').fadeIn(); 绝对定位的div，宽度为100％，高度为100％

<div style="position:absolute;height:100%;width:100%;display:none;">Profile info here</div>

Answer 3

您可以使用 jQuery ，但有一些不同的选项可以实现......

按照下面的说明选择一个！

您可以使用以下内容<{1}}

替换

您可以将新div 添加到您的网页，例如http://jsfiddle.net/KV7FS/
等...

jQuery提供了许多方法来管理和修改运行时的应用程序外观。

您可以阅读有关jQuery和所有功能的更多信息：

http://jsfiddle.net/REGFF/

最好的问候

如何复制此图层/叠加效果？

3 个答案: