使用纯CSS控制的弹出层实现Lightbox效果-优快云博客

本文介绍如何使用纯CSS实现Lightbox效果，包括如何创建可关闭的弹出层，并且能够在同一页面中使用此功能。通过实例演示了如何利用CSS样式控制弹出层的显示和隐藏，以及如何在页面中调用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


   #弹出div
    def popup_div(width, height, title, tagid, &block)
      content = capture(&block)
     right_text = ""
     if title.is_a?(Array)
       right_text = title[1]
       title = title[0]
     end
     concat %!
      <div id="#{tagid}" class="popup_layer" style="width:#{width}px;height:#{height}px">
        <div class="popup_title_bar">
        	<div class="popup_title_text">#{title}</div>
        	<div class="popup_title_close"><a href="#" onclick="Lock_CheckForm('#{tagid}');">[#{'关闭'.t}]</a></div>
        </div>	
        <div class="popup_split_left" style="height:#{height-24}px"></div>
      	<div class="popup_content" style="height:#{height-24}px">
      		#{content}
      	</div>
        <div class="popup_split_right" style="height:#{height-24}px"></div>
    </div>
      !, block.binding
    end

    #弹出提示
    def popup_tip(width, height, tagid, &block)
      content = capture(&block)
     concat %!
      <div id="#{tagid}" class="popup_tip" style="width:#{width}px;height:#{height}px">
      	<div class="popup_content" style="height:#{height-24}px">
      		#{content}
      	</div>
    </div>
      !, block.binding
    end


做lightbox时候，如果是另外一个页面的话，我用的是redbox，而在同一页面中的div做了好长时间也没做出来，要是单单一个div到也还好办，关键这个div还要用到本页面其他的数据，没办法在网上搜到了这段纯css控制的，挺不错的。
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid black;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
<div style="height:1090px"></div>
</body>
</html>

help中定义弹出框