Question

我想在我的网站上添加一个自动弹出灯箱。

我需要能够将它添加到我的Html页面。我使用wordpress但是我只允许我插入html代码。我不能使用插件。

任何Java脚本都可以使用。我想发布一个图像，它会在页面上说，直到该人关闭它。但是id也像可点击的图像

感谢

Answer 1

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>

Answer 2

您可以使用以下插件http://lokeshdhakar.com/projects/lightbox2/下载js并将其添加到header.php或footer.php文件中

http://www.jasonbutz.info/bootstrap-lightbox/
http://getbootstrap.com/javascript/#modals

更多示例下载所需的js将其添加到模板文件中并启动js调用

Answer 3

如果你想要一些简单的东西而不使用任何插件，你将不得不使用至少一些JavaScript和CSS。

您可以在页面中固定一个隐藏的div。页面加载后，您可以显示它。在这个div中，你可以放置任何你想要的东西和一个元素来关闭它。

您可以在下面看到一个简单的弹出窗口。 Javascript部分包含2个函数，打开并关闭弹出窗口。如您所见，我在页面内容和弹出窗口之间添加了黑色叠加层。这不是强制性的。

第二部分是简单的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>

简单的LightBox Javascript弹出窗口

3 个答案: