Question

我正在设置新的网页，在该网页上使用<map> and <area>标签时应该有一个交互式图像（单击点，就可以获取有关该位置的信息）。测试弹出窗口，我希望我在保持可见的位置时遇到问题，并在浏览器中检查是否看不到隐藏的属性。

我试图只复制空文档中的代码-可行（因此托管不应成为问题的一部分）。然后，我尝试了在互联网上（多个地方）找到的多个不同代码，但它们没有起作用。删除的PHP收录程序无法正常工作，错误仍然存在。

<?php $a='Regionální učebnice - Mapy'; ?>             
<!DOCTYPE HTML>
<html>  
  <head>    
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="Styles.css">    
    <title>
      <?php echo $a?>
    </title>  
  </head>  
  <body>    
    <div id="Main">        
      <div id="hlavicka">        
        <div class="textHlavicka">          
          <h1>Regionální učebnice Říčansko</h1>
          <h2>Učíme se o místě, kde žijeme</h2>        
        </div>        
        <div class="logoHlavicka" style="text-align:right;">          
          <img src="Pics/Logo.png">          
        </div>         
      </div>      
      <div class="navbar">            
        <a href="/">AKTUÁLNĚ</a>          
        <a href="historie.php">HISTORIE</a>     
        <a href="priroda.php">PŘÍRODA</a>     
        <a href="mapa.php">MAPY</a>     
        <a href="projekty.php">PROJEKTY PRO ŠKOLY</a>
      </div>     
      <div class="text">         <h1>MAPY</h1>                
        <p>Připravujeme zjednodušené mapky Říčan a Říčanska, které budou vhodné i pro děti z 1. stupně.
        </p>          
        <img src="Pics/Maps/Map1.jpg" usemap="#Pravek">       
        <map name="Pravek">                
          <area target="_self" alt="" title="" hre="#popup1" coords="243,205,12" shape="circle" data-reveal-id="one">                
          <area coords="183,247,12" shape="circle">    
        </map>     <h2>Popup</h2>


        <div class="popup" onclick="myFunction()">Click me to toggle the popup!   
          <span class="popuptext" id="myPopup">A Simple Popup!
          </span>
        </div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>
      </div>                      
    </div>       
  </body>
</html>

带有CSS的文件和原始文件在这里：https://github.com/VerneGeer/WebProject

我希望单击图像上的点并弹出以显示描述和感兴趣对象的图片。

Answer 1

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("active");
  }

 .show {
    background: #000;
    color: red;
  }

  .backdrown_opacity.active {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #29292996;
    width: 100%;
    height: 100%;
  }

  .my_container_popup {
    background: #fff;
    display: flex;
    width: 374px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, .6);
    border-radius: 8px;
    padding: 20px;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
  }

  .backdrown_opacity.active .my_container_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .child_text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .child_img {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .child_img img {
    width: 124px;
  }

<div id="Main">
  <div class="text">
    <h1>MAPY</h1>
    <p>Připravujeme zjednodušené mapky Říčan a Říčanska, které budou vhodné i pro děti z 1. stupně.
    </p>
    <button class="btn " onclick="myFunction()">open popup</button>
    <div class="backdrown_opacity" id="myPopup">
      <div class="my_container_popup">
        <div class="child_img">
          <img src="https://i.dailymail.co.uk/i/pix/2015/09/01/18/2BE1E88B00000578-3218613-image-m-5_1441127035222.jpg">
        </div>
        <div class="child_text">
          <h2> Popup</h2>
          <map name="Pravek">
            <area target="_self" alt="" title="" hre="#popup1" coords="243,205,12" shape="circle" data-reveal-id="one">
            <area coords="183,247,12" shape="circle">
          </map>

          <div class="popup">Toggle Here
            <div class="popuptext">A Simple Popup!
            </div>
          </div>
          <button class="btn" onclick="myFunction()">close</button>
        </div>
      </div>
    </div>
  </div>
</div>

如何修复Popup在我的网页上工作？

1 个答案: