单击外部javascript时关闭弹出窗口（不使用Jquery）

Question

我是一个非常新手的编码员，我不确定如何合并Jquery。简单地说，我试图通过点击外部来关闭弹出窗口，因为单击弹出图像会导致链接。我想在javascript中这样做，因为我在整个网站上有很多弹出窗口。非常感谢您的帮助。

这是HTML：

 <div class="popup" onclick="myFunction(this)"><span class="castName">Viola</span>
<span class="popuptext myPopup">      
  <a href="Viola_1.jpg" target="_blank"><img src=Viola_1.jpg style="width:300px;height:auto;" alt="Viola"></a><p>Miss Ellen Terry as Viola, mid to late 19th century</p></span></div>

这是Javascript：

function myFunction(element) {   
var popup = element.getElementsByClassName('myPopup');
 var i;
 for( i=0; i<popup.length; i--) {
 popup[i].classList.toggle('show');
 }
 }