简单的LightBox Javascript弹出

Simple LightBox Javascript Popup

本文关键字：弹出 Javascript LightBox 简单      更新时间：2023-09-26

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

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

任何Java脚本都可以工作。我想发布一个图像，它说在页面上，直到人关闭它。但我也希望图像是可点击的

谢谢

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>

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

  • http://www.jasonbutz.info/bootstrap-lightbox/
  • http://getbootstrap.com/javascript/情态动词
    • 下载所需的js，将其添加到模板文件中，并初始化js调用

    如果你想要一些不使用任何插件的简单的东西，你将不得不使用至少一些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>

    相关文章：