Question

我有一个div，我想在点击提交按钮后将其显示在灯箱中

Answer 1

让我们从CSS开始

 .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 orange;
background-color: white;
z-index:1002;
overflow: auto;

 }

black_overlay类是使网页看起来褪色的图层。这是一个黑色的80％不透明背景，与浏览器一样长而宽，将覆盖网页（查看z-index），此刻不显示（查看显示）。

白色内容类是具有照片/登录屏幕的图层/您希望在灯箱叠加层中显示的内容。它是一个放置在black_overlay图层上的白色图层（查看z-index，大于black_overlay图层）。溢出允许您拥有可滚动的内容。

在html文件中，将此行放在标记

之前

<div id="light" class="white_content">Hi, I am an happy lightbox</div><div id="fade" class="black_overlay"></div>

现在，触发您要打开Lightbox的操作并插入此代码：

document.getElementById('light').style.display='block';document.getElementById('fade').display='block';

例如，在链接中将是：

 <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Hide me</a>

完整的示例页面可能是

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <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 orange;
        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>
</body>
 </html>

如何应用灯箱打开div？

1 个答案: