javascript - 为订阅框创建透明背景

Question

现在这对我来说真的很难，而且我无法解决这个问题。我希望你们中的许多人一定看过一个站点，当您进入该站点时，您会看到主页.. 但是随后出现一个透明层并显示订阅框，上面有一个关闭按钮。谁能帮忙..只是布局..

Answer 1

很简单，就是这样完成的

<div class="subscribeContainer">
   subscribtion box here...
</div>
<style>
    .subscribeContainer{
       position:fixed;
       left:0;
       right:0;
       bottom:0;
       top:0;
       background:transparent;/* Default Anyway or  next line */
       background:rgba(0, 0, 0, 0.5); /* Semi Transparent */
       display:none;/* Hidden By Default Now */
    }
</style>

然后你可以像这样使用 jquery 淡化 .subscribeContainer

$(document).ready(function(){
    $('.toggleSubscribeButton').on('click', function(){
       $('.subscribeContainer').fadeIn('slow');
    });
});

或者，如果您希望它在窗口加载时淡入，就像这样

$(window).load(function(){
   $('.subscribeContainer').fadeIn('slow');
});

Answer 2

无需使用任何 JavaScript 只需添加 opacity:0.6; 有关详细信息，请访问链接：http ://www.w3schools.com/css/css_image_transparency.asp