Question

我有一个叠加层，可在页面打开时显示可忽略的消息。

目前，内容在后台加载，使我的页面可滚动。在我测试的浏览器上，opera mini，内容显示在后台。我认为它不支持透明度。

无论如何，我决定在背景中隐藏内容，直到消息被取消，而不是透明层来覆盖内容：

这是我剥离的css：

#Overlay { 
     width: 500px;   max-width:85%;
     margin:0 auto;     
     position:relative;     
     z-index:10;    
     display:block;     
     background-color:#363b59; }

#Overlay:target { display:none;}

#content { display:none;}

我的Html

<div id="Overlay">
     <p>overlay content</p>
     <a href="#Overlay">cancel</a>
</div> 

<div id="content">
     <p>content goes here</p>
</div>

所以，我的问题是：是否可以使用我用来隐藏叠加层的相同#Overlay:target来显示内容。还是有更好的方法？

Answer 1

如果您的div是兄弟姐妹，则可以使用常规兄弟选择器~。参考：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

<强> 段：

＆＃13;

#Overlay { 
     width: 500px;   max-width:85%;
     margin:0 auto;     
     position:relative;     
     z-index:10;    
     display:block;     
     background-color:#363b59; 
}
#Overlay, #Overlay a { color: #fff; }
#Overlay:target { display:none;}

#Overlay ~ #content { display:none;}
#Overlay:target ~ #content { display:block;}

＆＃13;

<div id="Overlay">
     <p>overlay content</p>
     <a href="#Overlay">cancel</a>
</div> 

<div id="content">
     <p>content goes here</p>
</div>

＆＃13;

Answer 2

你应该使用Jquery show（）和hide（）方法。

http://www.w3schools.com/jquery/eff_show.asp

http://www.w3schools.com/jquery/eff_hide.asp

如果要使内容div可见并隐藏叠加div

$("show_content_button").click(function(){ 
  $("#overlay").hide();
  $("#content").show();
});

如果您想再次显示叠加div，并隐藏内容div。

$("show_overlay_button").click(function(){ 
  $("#overlay").show();
  $("#content").hide();
});

无论如何，如果你想做得更好，我建议你实施bootstrap模式。 http://getbootstrap.com/javascript/#modals

应用：定位到具有不同ID的HTML元素

2 个答案: