docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

modal fix (#16591)

This commit is contained in:
Allie Sadler 2023-01-25 15:06:06 +00:00 committed by GitHub
parent 28dea857c5
commit 58a506a8a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_includes/image-modal.html
View File

@ -1,5 +1,5 @@
<div id="img-modal" class="modal">
<span class="close" id="img-modal-close">&times;</span>
<img src="/" alt="/" class="modal-content" id="img-modal-img">
<div id="img-modal-caption"></div>
<div id="img-modal1" class="modal1">
<span class="close1" id="img-modal-close1">&times;</span>
<img src="/" alt="/" class="modal-content1" id="img-modal-img1">
<div id="img-modal-caption1"></div>
</div>

14
_scss/_content.scss
View File

@ -135,7 +135,7 @@ main img {
main img:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
@ -150,7 +150,7 @@ main img:hover {opacity: 0.7;}
}
/* Modal Content (Image) */
.modal-content {
.modal-content1 {
margin: auto;
display: block;
width: 90%;
@ -158,7 +158,7 @@ main img:hover {opacity: 0.7;}
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#img-modal-caption {
#img-modal-caption1 {
margin: 15px auto;
display: block;
width: 80%;
@ -170,7 +170,7 @@ main img:hover {opacity: 0.7;}
}
/* Add Animation - Zoom in the Modal */
.modal-content, #img-modal-caption {
.modal-content1, #img-modal-caption1 {
animation-name: zoom;
animation-duration: 0.6s;
}
@ -181,7 +181,7 @@ main img:hover {opacity: 0.7;}
}
/* The Close Button */
#img-modal-close {
#img-modal-close1 {
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
@ -189,8 +189,8 @@ main img:hover {opacity: 0.7;}
margin-right: 10px;
}
#img-modal-close:hover,
#img-modal-close:focus {
#img-modal-close1:hover,
#img-modal-close1:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;

8
assets/js/modal.js
View File

@ -1,10 +1,10 @@
// Get the modal for image 1
var modal = document.getElementById("img-modal");
var modal = document.getElementById("img-modal1");
// Get the image and insert it inside the modal - use its "alt" text as a caption
const images = document.querySelectorAll("main img");
var modalImg = document.getElementById("img-modal-img");
var captionText = document.getElementById("img-modal-caption");
var modalImg = document.getElementById("img-modal-img1");
var captionText = document.getElementById("img-modal-caption1");
function handleImageClick(event) {
modal.style.display = "block";
modalImg.src = event.target.src;
@ -16,7 +16,7 @@ images.forEach(image => image.addEventListener("click", handleImageClick))
// Get the element that closes the modal
var span = document.getElementById("img-modal-close");
var span = document.getElementById("img-modal-close1");
function handleModalClose(event) {
if (event.type==="click"||event.key==="Escape"){
modal.style.display = "none"