如何通过在灯箱外单击或在与图像贴图组合时点击esc退出灯箱

How to exit lightbox by clicking outside the box or hitting esc when combined with an image map

本文关键字：组合 esc 退出 何通过 单击 图像      更新时间：2024-02-09

我已经将这个灯箱代码改编为我正在处理的一个涉及图像映射的项目。这是我的项目中的样子，我为每个区域元素都有这个，这样点击每个元素就会打开一个不同的灯箱：

<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>

我目前只能通过点击灯箱角落的"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语句一起放在小节中。如果有帮助，请告诉我：）

相关文章：