0

我想制作一个立即加载到索引页面上的弹出窗口，然后如果您单击任意位置就可以关闭。我整理了一个有效的代码。但是，当我将它放入自定义模块时，我不喜欢它的显示方式。所以我把它放在索引页面的html文件中。它工作得很好，但是，当其他文章也从索引页面加载时，它会加载到每个页面上。

是否有任何扩展或无论如何我可以让我的代码仅在加载主索引页面时才显示，而不是其他时间？我很感激帮助。

#popupContainer {
    z-index: 1;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 1000%;
}

#popup {
    z-index: 2;
    position: relative;
    width: 600px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    top: 100px;
    background-color:#000000;
    background-image: url(http://www.pureohiowellness.com/rd/images/logo25.png);
    background-position: center; 
    background-repeat: no-repeat;
    border:6px outset #111;
    padding: 0;
    text-align:center;
    border-radius:20px;
    line-height:2.6;
                          }
                          
@media screen and (max-width: 767px) {   
    #popup{
        width:75%;
    } 
}

@media screen and (min-width: 768px) {      
    #popup{      
        width:75%;
    } 
} 
@media (min-width: 992px) {      
      #popup{        
          width:75%;
      } 
}
@media (min-width: 1200px) {    
     #popup{         
        width:75%;
     } 
}

    
#popupExit {
    position: absolute;
    right: 0;
    margin: 5px;
    cursor: pointer;
    color: #833;
}

#popupExit p {
    margin: 0;
    padding: 0;
}
#popupContainer #popup p {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 36px;
    color:#FFFFFF;
}
</style>


<div id="popupContainer">
  <div id="popup">
            <div id="popupExit">
              
            </div>
            <p>LONDON LOCATION NOW OPEN!  ONLY 20 MINUTES FROM DOWNTOWN COLUMBUS!!</p>
        </div>
</div>
   
<script type="application/javascript">

function hidePopup(event) {
    document.getElementById("popupContainer").style.display = 'none';
    blockClick(event)    
}

function blockClick(event) {
    event.stopPropagation();
}

document.getElementById("popupContainer").onclick = hidePopup;
document.getElementById("popupExit").onclick = hidePopup;
document.getElementById("popup").onclick = blockClick;
</script>```
4

1 回答 1

0

至少有两种方法可以实现：

  1. 为您的主页提供专用的模板样式，并仅在此处添加您的代码。这实际上是一种非常好的方式，但会复制您的模板代码。

  2. 创建一个自定义模块，让它只在主页上可见。该模块需要添加 CSS/JS 和一些更多的 JS 代码，这些代码将您的 popupContainer 添加到文档正文中，而不是立即渲染它。您可以创建自定义模块或简单的支持 HTML 的模块。这种方式非常hacky，但会做你想要实现的。确保在将弹出窗口添加到 DOM 后附加事件侦听器。

于 2020-10-17T06:49:57.600 回答