logo标签列表

简单的 LightBox Javascript 弹出窗口

javascriptjqueryhtmllightbox
3

我想为我的网站添加自动弹出的Lightbox。

我需要将其添加到我的Html页面中。我正在使用WordPress，但我拥有的脚本只允许我插入HTML代码。我无法使用插件。

任何JavaScript都可以。我想发布一张图片，并希望它在页面上停留，直到用户关闭它。但我也希望该图像可点击。

谢谢

3个回答
3

function showPopup() {

    document.getElementById('blackOverlay').style.display = 'block';
    document.getElementById('popup').style.display = 'block';
    
}

function closePopup() {

    document.getElementById('blackOverlay').style.display = 'none';
    document.getElementById('popup').style.display = 'none';
    
}
.blackOverlay {
    display:none;
    background:rgba(0,0,0,.6);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

.popup {
    display:none;
    background:#fff;
    position:fixed;
    top:10%;
    left:50%;
    width:600px;
    height:80%;
    margin-left:-300px;
    z-index:10;
    border:2px solid #000;
}

.closePopup {
    float:right;
    font-weight:bold;
    color:red;
    cursor:pointer;
}

img {
    max-width:100%;
    max-height:100%;
}
<body onload="showPopup()">
    
    <div>
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
    </div>
    
    
    
    
    <div id="blackOverlay" class="blackOverlay"></div>
    <div id="popup" class="popup">
        <span class="closePopup" onclick="closePopup()">X</span>
        <img src="http://dummyimage.com/600x400/fff/000.png" />
    </div>
</body>

1
0
如果你想使用简单的方法且不使用任何插件，那么你至少要使用一些JavaScript和CSS。
你可以有一个隐藏的div并将其固定在页面上。当你的页面加载时，你可以将其显示出来。在这个div中，你可以放置任何你想要的内容以及一个关闭它的元素。
下面是一个简单的弹出窗口。Javascript部分包含两个函数，打开和关闭你的弹出窗口。如你所见，我在页面内容和弹出窗口之间添加了一个黑色叠加层，但这并非必需。
第二部分是简单的CSS，用于将你的弹出窗口定位到你想要的位置。
最后，你可以看到所需的HTML标记来创建你的弹出窗口。 

function showPopup() {

    document.getElementById('blackOverlay').style.display = 'block';
    document.getElementById('popup').style.display = 'block';
    
}

function closePopup() {

    document.getElementById('blackOverlay').style.display = 'none';
    document.getElementById('popup').style.display = 'none';
    
}
.blackOverlay {
    display:none;
    background:rgba(0,0,0,.6);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

.popup {
    display:none;
    background:#fff;
    position:fixed;
    top:10%;
    left:50%;
    width:600px;
    height:80%;
    margin-left:-300px;
    z-index:10;
    border:2px solid #000;
}

.closePopup {
    float:right;
    font-weight:bold;
    color:red;
    cursor:pointer;
}

img {
    max-width:100%;
    max-height:100%;
}
<body onload="showPopup()">
    
    <div>
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
    </div>
    
    
    
    
    <div id="blackOverlay" class="blackOverlay"></div>
    <div id="popup" class="popup">
        <span class="closePopup" onclick="closePopup()">X</span>
        <img src="http://dummyimage.com/600x400/fff/000.png" />
    </div>
</body>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接