HTML - JS如何通過點擊打開圖像彈出圖像？

我應該寫一些代碼html或javascript或其他通過點擊圖像打開一個彈出窗口。我已經看到window.open()方法，但這不是我正在尋找的。準確地說，我想打開一個像Twitter這樣的圖像彈出窗口：遮蓋背景並顯示在屏幕中間放大的圖像。HTML - JS如何通過點擊打開圖像彈出圖像？

有什麼建議嗎？

來源

2015-10-05 Alessio

請附上您的代碼。 –

可以使用燈箱來做到這一點。

沒有在這個環節上一個簡單的例子：

http://lokeshdhakar.com/projects/lightbox2/

來源

2015-10-05 18:11:11 Jack

非常感謝，我不知道這個工具...非常容易使用 – Alessio

您可以使用Bootstrap，否則，製作絕對/固定位置居中的DIV。點擊獲取圖像的URL，並將其放入新的DIV中的img標籤中。最後添加淡入/淡出到效果的新DIV。

來源

2015-10-05 18:07:55

可以使用lightbox。

它的使用非常簡單。在HTML文件中的腳本標籤和CSS樣式表，然後簡單地使用：

<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="images/thumb-1.jpg" alt="Girl looking out people on beach"></a>

來源

2015-10-05 18:28:50

// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the image and insert it inside the modal - use its "alt" text as a caption 
 
var img = document.getElementById('myImg'); 
 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 
img.onclick = function(){ 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    captionText.innerHTML = this.alt; 
 
} 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
}

#myImg { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
#myImg:hover {opacity: 0.7;} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    padding-top: 100px; /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; /* Full width */ 
 
    height: 100%; /* Full height */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
 
} 
 

 
/* Modal Content (image) */ 
 
.modal-content { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
} 
 

 
/* Caption of Modal Image */ 
 
#caption { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
    text-align: center; 
 
    color: #ccc; 
 
    padding: 10px 0; 
 
    height: 150px; 
 
} 
 

 
/* Add Animation */ 
 
.modal-content, #caption {  
 
    -webkit-animation-name: zoom; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: zoom; 
 
    animation-duration: 0.6s; 
 
} 
 

 
@-webkit-keyframes zoom { 
 
    from {-webkit-transform:scale(0)} 
 
    to {-webkit-transform:scale(1)} 
 
} 
 

 
@keyframes zoom { 
 
    from {transform:scale(0)} 
 
    to {transform:scale(1)} 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 35px; 
 
    color: #f1f1f1; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    transition: 0.3s; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #bbb; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
/* 100% Image Width on Smaller Screens */ 
 
@media only screen and (max-width: 700px){ 
 
    .modal-content { 
 
     width: 100%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
</head> 
 
<body> 
 

 
<img id="myImg" src="https://www.w3schools.com/howto/img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <span class="close">&times;</span> 
 
    <img class="modal-content" id="img01"> 
 
    <div id="caption"></div> 
 
</div> 
 

 
</body> 
 
</html>

更多：https://www.w3schools.com/howto/howto_css_modal_images.asp

來源

2017-08-30 02:42:55

HTML - JS如何通過點擊打開圖像彈出圖像？

回答

相關問題