在弹出窗口中显示图像（相同 window）onClick 基本图像上的特定区域

Question

我已经使用图像映射来指定当用户单击图像上的特定区域时要显示的图像。这是我的代码：

<html>    
<body>
<div align="center">

<img id="IMGMAPS" src="base.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self"     />
</map>

</div>
</body>
</html>

此代码生成下图：

我想要的是如果用户单击指定的坐标，图像 1、2、3、4、5 应该在同一 window 的弹出窗口中打开。

如何实现？

编辑 1： image

基础图片是单张图片。 1、2、3、4、5是图像上具体坐标的区域。每个区域都有一个对应的图像，仅当用户单击具有特定坐标的特定区域时才会在弹出窗口中打开。

编辑 2： 根据@Edrees 的建议，我进行了以下更改：

添加了基础 JS

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js" ></script>
<script>
$(document).foundation();
</script>

二手data-reveal-id

<img id="IMGMAPS" src="selfie.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" data-reveal-id="firstModal" data-reveal  />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="selfie.jpg" />

<!--<div id="firstModal" class="reveal-modal" data-reveal> -->
<area  alt="" title="" href="Shortlisted_selfie\VenkateshSittula.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"  id="firstModal" class="reveal-modal" data-reveal   />
<a class="close-reveal-modal">&#215;</a>
<!-- </div> -->

这对我的结果没有任何影响。

编辑 3： 我仍在努力寻找一个有效的解决方案。只是再次澄清我在寻找什么：

基本图像是具有区域 1、2、3、4、5 的单个图像。
每个区域（1、2、3、4、5）都有对应的图像。
我想要一个功能，如果我点击区域 1，它的相应图像会在 modal dialog 中打开，如果我点击区域 2，它的相应图像会在 modal dialog 中打开...依此类推（仅在点击时）。

有解决办法吗？

编辑 4： 根据 Edrees 的解决方案，我能够实现我所寻找的功能。此外，我需要通过在 reveal-modal 的右上角添加一个关闭按钮或 link 来微调此解决方案。我看了一些 foundation 文档，发现有一个名为 **close-reveal-modal** 的 class 用于此目的，但我不知道如何在我的解决方案中实现它。我还有尺寸从 612*640 到 900*1600 到 1280*960 到 1280*960 到1920*1080...我如何确保在模态内打开的图像根据 window 大小按比例调整大小（即图像保持比例）？

使用以下方法改进解决方案 codepen link

编辑 5： 只要我单独查看此页面，@Edrees 的解决方案就可以完美运行。但是，当我将此页面嵌入 MOJO 门户时，Foundation CSS 和 JS 完全搞砸了 MOJO 门户的默认行为。默认值 CSS 似乎被 Foundation 覆盖了。有没有人有解决方法？一个简单的 jQuery 来解决这个问题而不使用 Framework/plugin?

编辑 6： 在面对基础框架的问题后，我意识到 Rodrigo Leite 有解决这个问题的答案。虽然，我没有发现任何模式对话框被打开，但它确实给用户一种对话框的感觉并且足以满足我的要求。

我需要什么改变：

我希望 "div" 覆盖整个 window
图像应显示在 window/screen
显示映射图像时window/screen右上角的关闭按钮
打开图像时，用户应该只能单击关闭按钮。 window/screen 的所有其他部分应禁用点击功能/点击除关闭按钮以外的屏幕任何部分无任何操作

注意：关闭按钮可以以任何形式显示，即图像、按钮等。

Answer 1

您可以创建自己的模式 div 并将其隐藏，然后，当用户单击区域时，您可以使用 javascript 显示此模式并将您的内容放入其中。看一看：

css

#modal-background{
   width: 100%;
   height: 100%;
   background-color: #000000;
   position: fixed;
   top: 0; left: 0;
   display: none;
   z-index: 99;
}

#modal-content{
   background-color: #FFFFFF;
   width: 500px;
   height: 500px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -250px;
   margin-top: -250px;
   z-index: 100;
}

html

    <div id='modal-background'>
        <div id='modal-content'>
        </div>
    </div>

<img id="IMGMAPS" src="http://i.stack.imgur.com/zir2T.png" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self"     />
</map>

javascript (jquery):

$(document).ready(function(){

        $('area').click(function(){
            $('#modal-content').html('<img src=' + $(this).data('imageurl') +'>');
            $('#modal-background').fadeIn();
         });

        $('#modal-background').click(function(){
            closeModal();
         });

});

function closeModal(){
  $('#modal-background').fadeOut();
}

希望对您有所帮助。

Answer 2

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script>
</head>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="" data-reveal-id="one">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="" data-reveal-id="two">
  <area shape="circle" coords="124,58,8" alt="Venus" href="" data-reveal-id="three">
</map>
<img src="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" width="145" height="126" alt="Planets" id="one" data-reveal class="reveal-modal">

<img src="http://news.bbcimg.co.uk/media/images/65904000/jpg/_65904720_mdis_global_enhancedcolor_caloris_orth_hd.jpg" width="145" height="126" alt="Planets" id="two" data-reveal class="reveal-modal">

<img src="https://upload.wikimedia.org/wikipedia/commons/1/10/Kepler10b_artist.jpg" width="145" height="126" alt="Planets" id="three" data-reveal class="reveal-modal">


<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>

Javascript: 所需文件：JQuery + foundation.js

JS代码： $(文档).foundation();

如需完整的工作代码，请访问此 link

在弹出窗口中显示图像（相同 window）onClick 基本图像上的特定区域

Display image in a popup (same window) onClick of a particular area on the base image

html

javascript

css

jquery

imagemap