如何在不關閉模式的情況下更改圖像在html/css中

Question

每當我打開模式時，它看起來都非常好，但是當我點擊數字「2」時，模型內部庫中的第二張照片會關閉。如何在不關閉模式的情況下選擇2（或任何其他號碼）？

這是我的代碼：

/* SLIDER CSS */ 
 
#images { 
 
    width: 400px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin: 20px auto; 
 
} 
 

 
#images img { 
 
    width: 400px; 
 
    height: 250px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -400px; 
 
    z-index: 1; 
 
    opacity: 0; 
 
    transition: all linear 500ms; 
 
    -o-transition: all linear 500ms; 
 
    -moz-transition: all linear 500ms; 
 
    -webkit-transition: all linear 500ms; 
 
} 
 

 
#images img:target { 
 
    left: 0; 
 
    z-index: 9; 
 
    opacity: 1; 
 
} 
 

 
#images img:first-child { 
 
    left: 0; 
 
} 
 

 
#slider a { 
 
    text-decoration: none; 
 
    background: #E3F1FA; 
 
    border: 1px solid #C6E4F2; 
 
    padding: 4px 6px; 
 
    color: #222; 
 
} 
 

 
#slider a:hover { 
 
    background: #C6E4F2; 
 
} 
 

 

 
/* MODAL CSS */ 
 
.modalDialog { 
 
    position: fixed; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0,0,0,0.8); 
 
    z-index: 99999; 
 
    opacity:0; 
 
    -webkit-transition: opacity 400ms ease-in; 
 
    -moz-transition: opacity 400ms ease-in; 
 
    transition: opacity 400ms ease-in; 
 
    pointer-events: none; 
 
} 
 

 
.modalDialog:target { 
 
    opacity:1; 
 
    pointer-events: auto; 
 
} 
 

 
.modalDialog > div { 
 
    width: 400px; 
 
    position: relative; 
 
    margin: 10% auto; 
 
    padding: 5px 20px 13px 20px; 
 
    border-radius: 10px; 
 
    background: #fff; 
 
    background: -moz-linear-gradient(#fff, #999); 
 
    background: -webkit-linear-gradient(#fff, #999); 
 
    background: -o-linear-gradient(#fff, #999); 
 
} 
 

 
.close { 
 
    background: #606061; 
 
    color: #FFFFFF; 
 
    line-height: 25px; 
 
    position: absolute; 
 
    right: -12px; 
 
    text-align: center; 
 
    top: -10px; 
 
    width: 24px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
    -moz-box-shadow: 1px 1px 3px #000; 
 
    -webkit-box-shadow: 1px 1px 3px #000; 
 
    box-shadow: 1px 1px 3px #000; 
 
} 
 

 
.close:hover { 
 
    background: #00d9ff; 
 
}

<a href="#openJunior" ="">See more</a> 
 

 
<div id="openJunior" class="modalDialog"> 
 
    <div> 
 
    <a href="#close" title="Close" class="close">X</a> 
 
    <div id="images"> 
 
     <img id="image1" src="http://lorempixel.com/400/250/people" /> 
 
     <img id="image2" src="http://lorempixel.com/400/250/sports" /> 
 
     <img id="image3" src="http://lorempixel.com/400/250/nature" /> 
 
     <img id="image4" src="http://lorempixel.com/400/250/abstract" /> 
 
     <img id="image5" src="http://lorempixel.com/400/250/animals" /> 
 
    </div> 
 
    <div id="slider"> 
 
     <a href="#image1">1</a> 
 
     <a href="#image2">2</a> 
 
     <a href="#image3">3</a> 
 
     <a href="#image4">4</a> 
 
     <a href="#image5">5</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您可以嘗試使用event.stopPropagation，例如像這樣：

$('.modalDialog').on('click', function(event){ 
     event.stopPropagation(); 
}); 

jQuery API stopPropagation

對你笑的進一步評論請考慮將您正在使用的JavaScript添加到您的帖子中。