Joomla弹出窗口，单击任意位置即可关闭

我想做一个弹出窗口，立即加载到索引页面，然后可以关闭，如果你点击任何地方。我编写了一个有效的代码。但是，当我将其放入自定义模块时，我不喜欢它的显示方式。所以我把它放在索引页面的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>```

#弹出式容器{
z指数：1；
位置：绝对位置；
背景色：rgba（0,0,0,0.2）；
宽度：100%；
身高：1000%；
}
#弹出窗口{
z指数：2；
位置：相对位置；
宽度：600px；
高度：自动；
左边距：自动；
右边距：自动；
顶部：100px；
背景色：#000000；
背景图片：url(http://www.pureohiowellness.com/rd/images/logo25.png);
背景位置：中心；
背景重复：无重复；
边界：6px#111；
填充：0；
文本对齐：居中；
边界半径：20px；
线高：2.6；
}
@媒体屏幕和（最大宽度：767px）{
#弹出窗口{
宽度：75%；
} 
}
@媒体屏幕和（最小宽度：768px）{
#弹出{
宽度：75%；
} 
} 
@介质（最小宽度：992px）{
#弹出{
宽度：75%；
} 
}
@介质（最小宽度：1200px）{
#弹出{
宽度：75%；
} 
}
#弹出式出口{
位置：绝对位置；
右：0；
保证金：5px；
光标：指针；
颜色：#833；
}
#弹出式出口{
保证金：0；
填充：0；
}
#弹出式容器#弹出式容器{
字体系列：“Lucida控制台”，摩纳哥，monospace；
字体大小：36px；
颜色：#FFFFFF；
}
伦敦的位置现在开放！从哥伦布市中心只需20分钟

函数hidePopup（事件）{
document.getElementById（“popupContainer”）.style.display='none'；
区块点击（事件）
}
功能块单击（事件）{
event.stopPropagation（）；
}
document.getElementById（“popupContainer”）.onclick=hidePopup；
document.getElementById（“popupExit”）.onclick=hidePopup；
document.getElementById（“弹出”）.onclick=blockClick；
```

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

有一个专门的模板样式为您的主页和添加您的代码只有那里。这实际上是一种很好的方法，但会复制模板代码

创建自定义模块，使其仅在主页上可见。该模块需要添加CSS/JS和更多的JS代码，这些代码将popupContainer附加到文档体，而不是立即呈现它。您可以创建自定义模块或简单的支持HTML的模块。这种方法很难实现，但可以实现您想要实现的目标。确保在将弹出窗口添加到DOM后附加事件侦听器

---

如果您正在进行Joomla开发，请创建一个堆栈交换帐户。请在JSE询问所有Joomla问题。