Javascript 如何在与图像贴图组合时通过单击方框外部或按esc键退出lightbox_Javascript_Html_Lightbox_Imagemap

Javascript 如何在与图像贴图组合时通过单击方框外部或按esc键退出lightbox

javascript html

Javascript 如何在与图像贴图组合时通过单击方框外部或按esc键退出lightbox,javascript,html,lightbox,imagemap,Javascript,Html,Lightbox,Imagemap,我已经适应了一个涉及图像地图的项目。这是我的项目中的外观，我对每个区域元素都有此功能，因此单击每个元素将打开不同的灯箱： <body> <center><img src="Slides/Slide2.jpg" style="width:100%; height:auto;" alt="" USEMAP="#Map"></center> <map name="Map" id="Map"> <div id="grayB

我已经适应了一个涉及图像地图的项目。这是我的项目中的外观，我对每个区域元素都有此功能，因此单击每个元素将打开不同的灯箱：

<body>
  <center><img src="Slides/Slide2.jpg" style="width:100%; height:auto;" alt="" USEMAP="#Map"></center>
  <map name="Map" id="Map">
    <div id="grayBG" class="grayBox" style="display:none;"></div>
    <div id="LightBox1" class="box_content" style="display:none;">
      <table cellpadding="3" cellspacing="0" border="0">
        <tr align="left" style="height: 100%; width: 100%;">
          <td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('1'); return false;" style="cursor:pointer;" align="right">
            <div>X</div>
            <object type="text/html" data="Content/2-1.html" style="height: 400px; width: 600px;"></object>
          </div>
          <area alt="" title="" href="#" shape="poly" coords="145,365,540,365,540,430,144,430" onclick="displayHideBox('1'); return false;"/></td>
        </tr>
      </table>
    </div>
  </map>

我使用的Javascript代码与上面链接的网站相同，为了方便起见，我将其放在这里：

<script type="text/javascript" language="javascript"> 
/* Superior Web Systems */ 
function displayHideBox(boxNumber) 
{ 
    if(document.getElementById("LightBox"+boxNumber).style.display=="none") { 
        document.getElementById("LightBox"+boxNumber).style.display="block"; 
        document.getElementById("grayBG").style.display="block"; 
    } else { 
        document.getElementById("LightBox"+boxNumber).style.display="none"; 
        document.getElementById("grayBG").style.display="none"; 
    } 
} 
</script>


/*高级网络系统*/
功能显示HIDEBOX（箱号）
{ 
if（document.getElementById（“LightBox”+boxNumber）.style.display==“none”）{
document.getElementById（“LightBox”+boxNumber）.style.display=“block”；
document.getElementById（“grayBG”）.style.display=“block”；
}否则{
document.getElementById（“LightBox”+boxNumber）.style.display=“无”；
document.getElementById（“grayBG”）.style.display=“无”；
} 
}

我目前只能通过点击灯箱角落的“X”退出灯箱。我希望能够通过单击框外的任何位置或按esc键退出它

 if(document.getElementById("LightBox"+boxNumber).style.display=="none") { 
        document.getElementById("LightBox"+boxNumber).style.display="block"; 
        document.getElementById("grayBG").style.display="block"; 
    } else {        
 var currentLightbox = document.getElementById('LightBox' + boxNumber);
        if (!currentLightbox.is(e.target) // if the target of the click isn't the container...
                && currentLightbox.has(e.target).length === 0) // ... nor a descendant of the container 
                || e.keyCode == 27 // if the user presses esc
        {
           document.getElementById("LightBox"+boxNumber).style.display="none"; 
           document.getElementById("grayBG").style.display="none"; 
        }
    }

这一部分应该与else语句一起出现在小节中。如果有帮助，请告诉我：）

我不确定是否正确插入，当我将其放入时，单击时灯箱不再显示。我试图把它放在else语句之后，并替换之前的内容。我已经更新了我的答案。替换函数中的所有内容并将其放入。你能看看这是否有用吗？另外，您是否检查了控制台以查看是否输出了任何错误。我自己无法测试。不幸的是，它似乎仍然不起作用。我想知道我现在是否需要修改正文中的代码。是否有一些地方需要包含“currentLightbox”变量？控制台显示代码中没有错误。您不需要添加它。我认为问题在于它所附加的事件处理程序。它仅在用户单击div时调用函数。请尝试在代码下面调用函数displayHideBox（），看看这是否有帮助。