如何在vanila javascript中创建外部可单击div

我有在freemarker中使用的javascript代码，问题是我不知道如何使外部div click工作

第一行来自我传递ID的freemarker（我们在一个列表中，所以对于代码中看到的每个项目，我将获得多个元素和函数）

idNum='${event.occurrenceId}'；
//获取模态元素并将“显示”设置为“无”
var modal=document.getElementById（idNum.getElementsByClassName（'modal'）[0]；
//获取打开模式按钮
var modalBtn=document.getElementById（idNum.getElementsByClassName（'modalBtn'）[0]；
//接近按钮
var closeBtn=document.getElementById（idNum.getElementsByClassName（'closeBtn'）[0]；
myData.push（{id:idNum，modalElement:modal，modalButton:modalBtn，closeButton:closeBtn，openModalFun:openModal，closeModalFun:closeModal，outsideClickFun:outsideClick}）；
var ite=myData.find（（{id}）=>id==idNum）；
函数openModal（）{
myData.find（（{id}）=>id==this.parentNode.id）.modalElement.style.display='block'；
}
//关闭模式的函数
函数closeModal（）{
myData.find（（{id}）=>id==this.parentNode.parentNode.parentNode.id）.modalElement.style.display='none'；
}
//函数关闭外部单击
函数外部单击（e）{
if（e.target==ite.modalElement）{
ite.modalElement.style.display='none'；
}
}
//收听打开的单击
ite.modalButton.addEventListener（'click'，ite.openModalFun）；
//收听“关闭”按钮
ite.closeButton.addEventListener（'单击'，ite.closeModalFun）；
//收听外部点击
window.addEventListener（'click'，site.outsideClickFun）；

---

因此，如果我理解正确，您需要做的是创建一个popup div，如果用户在popup div之外单击，popu div将关闭/消失，但如果用户单击其中的任何位置，它将不起任何作用

这里您要做的是将其命名为

modal

和

modalContent

现在，

modal

是占据整个屏幕的div。您必须将其设置为高度和宽度的

100%

，无论您做什么，都要使其覆盖整个屏幕

现在，

modalContent

是您实际的信息弹出窗口。给它一个css

z-index

，可能是

1

，这样它就会排在其他所有东西前面

现在在JS中，设置当点击

modal

时，

modal

和

modalContent

隐藏

差不多吧

这里有一个非常简单的工作示例来帮助您

---

您的意思是，如果用户单击身体上除模态之外的任何位置？有时，人们会在模态后面放置一个遮罩，整个屏幕都被遮罩覆盖（半透明与否），如果是你的情况，你也可以绑定对遮罩的点击，这正是我的意思，我希望能够点击模态之外的任何位置，模态关闭，我读过关于绑定的内容，但说实话，我不明白如何在代码中使用它，我尝试过，但没有成功。您能否澄清问题中的问题（您可以编辑它），从您的评论来看，您似乎不知道如何绑定单击事件。这基本上是模态掩码方法，更安全的是，模式掩码在模式关闭后消失。谢谢Hungism，mw509我成功做到了：）如果这个答案有用，请将它标记为答案

<script type="text/javascript">

idNum ='${event.occurenceId}';

// Get modal element and set  display to none
var modal = document.getElementById(idNum).getElementsByClassName('modal')[0];

// Get the open modal button
var modalBtn = document.getElementById(idNum).getElementsByClassName('modalBtn')[0];

// Get close button 
var closeBtn = document.getElementById(idNum).getElementsByClassName('closeBtn')[0];

myData.push({id:idNum, modalElement:modal, modalButton:modalBtn, closeButton:closeBtn,openModalFun:openModal,closeModalFun:closeModal,outsideClickFun:outsideClick});
var ite = myData.find( ({id}) => id === idNum);

function openModal(){
       myData.find( ({id}) => id === this.parentNode.id).modalElement.style.display='block';
}


//function to close modal
function closeModal(){
    myData.find( ({id}) => id === this.parentNode.parentNode.parentNode.id).modalElement.style.display='none';
}

//function to close outside click
function outsideClick(e){
    if(e.target == ite.modalElement){
        ite.modalElement.style.display='none';
    }
}

// Listen for open click 
ite.modalButton.addEventListener('click', ite.openModalFun);

// Listen for close click 
ite.closeButton.addEventListener('click', ite.closeModalFun);

// Listen for outside click 
window.addEventListener('click',ite.outsideClickFun);

</script>