弹出图像映射JS

Question

如果您使用普通JS选择图像地图上的区域，我想创建一个弹出窗口。 我刚开始使用JS并使用我的代码作为按钮。在图像映射中，此代码无效。我只看到弹出一秒钟，它又消失了。

希望有人可以帮助我。

HTML：

  <div>
      <!-- Image Map -->
      <img src="../images/image.png" usemap="#image-map" alt="x">
        <map name="image-map">
      <area id="areaOne" target="x" alt="" title="x" href="" coords="294,72,203,88,140,125,122,169,140,235,195,270,242,225,301,174,351,136,391,92,334,75" shape="poly">
      </map>        
  </div>

  <div id="popUpOne">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam sed leo felis. Maecenas tincidunt orci id orci vulputate congue. 
    Aliquam in molestie tortor. Sed erat felis, tincidunt id commodo sit amet, 
    dignissim fringilla metus. Proin porta, justo eget sollicitudin hendrerit, 
    sapien ligula imperdiet erat, vel hendrerit odio quam ut mauris. 
    Etiam laoreet justo massa, ac pretium sem pharetra at. Nullam ut felis orci. 
    Duis faucibus mauris libero, at semper nulla finibus vitae. In ut ex justo.</p>
  </div>

JS：

var areaOne = document.getElementById("areaOne");
var popupOne = document.getElementById("popupOne");
popupOne.style.display = "none";
areaOne.addEventListener("click", function(){
if (popupOne.style.display === "none") {
   popupOne.style.display = "block";
} else {
   popupOne.style.display = "none";
}
});

Answer 1

没有必要写很多javasript来显示弹出窗口。只需一行javascript就可以实现。而且没有javascript。看我的回答

function ModalOpen(namee) {
 	window.location.href=namee
}

.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}

.modal-dialog{
      width: 600px;
    margin: 30px auto;
}

.modal-content{
  
  position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: beige;
  margin: 80px 0;
}

.box {
  width: 40%;
  margin: 0 auto;
  background: red;
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid blue;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: blue;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}



.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

<button onclick="ModalOpen('#popup1')">Pop Up Open With Javascript</button>
<div id="popup1" class="overlay" >  
<div class="popup">
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                    
                     
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam sed leo felis. Maecenas tincidunt orci id orci vulputate congue. 
Aliquam in molestie tortor. Sed erat felis, tincidunt id commodo sit amet, 
dignissim fringilla metus. Proin porta, justo eget sollicitudin hendrerit, 
sapien ligula imperdiet erat, vel hendrerit odio quam ut mauris. 
Etiam laoreet justo massa, ac pretium sem pharetra at. Nullam ut felis orci. 
Duis faucibus mauris libero, at semper nulla finibus vitae. In ut ex justo.</p>
                </div>  
                <div class="modal-body"> 
                
                </div>  
                <div class="modal-footer">  
                    
                     <a class="close btn btn-default" href="#">x</a>
                </div>  
           </div>  
      </div> 
      </div>
 </div>
 
 
 <a href="#popup2">Pop Up open with out Javascript</a>
<div id="popup2" class="overlay" >  
<div class="popup">
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                    
                     
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam sed leo felis. Maecenas tincidunt orci id orci vulputate congue. 
Aliquam in molestie tortor. Sed erat felis, tincidunt id commodo sit amet, 
dignissim fringilla metus. Proin porta, justo eget sollicitudin hendrerit, 
sapien ligula imperdiet erat, vel hendrerit odio quam ut mauris. 
Etiam laoreet justo massa, ac pretium sem pharetra at. Nullam ut felis orci. 
Duis faucibus mauris libero, at semper nulla finibus vitae. In ut ex justo.</p>
                </div>  
                <div class="modal-body"> 
                
                </div>  
                <div class="modal-footer">  
                    
                     <a class="close btn btn-default" href="#">x</a>
                </div>  
           </div>  
      </div> 
      </div>
 </div>