所以我想使用带有一些 JS 的 html 和 css 创建我自己的画廊，我试图以模态样式制作图像，这样它看起来很花哨，我从 w3school.com 获得了以模态制作图像的代码我已经更改了图像 scr 和其他将图像连接到模态的东西。我已经尝试了一切我仍然无法弄清楚它有什么问题。预先感谢您对我的帮助。
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 8vw 200vw 7vw;
grid-gap: 0em;
margin: 0;
padding: 0;
background-color: #ffffff;
width: 100%;
}
header,
footer {
grid-column: 1 / span 2;
}
main {
grid-column: 1 / span 2;
}
body {
margin: 0 auto;
max-width: 89em;
margin-left: 0;
margin-right:0;
padding: 0em 0;
}
header,
main,
aside,
footer {
display: flex;
}
footer {
background: #eaeaea;
}
.main1 {
margin-top: 450px;
margin-left: 0;
}
#body_1 h2 {
margin-left: 50px;
font-size: 30px;
color: black;
margin-top: 95px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h6 {
margin-left: 10px;
color: blue;
margin-top: 220px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h4 {
margin-left: 230px;
font-size: 30px;
color: black;
margin-top: 260px;
margin-bottom:3px;
position: left;
float: left;
}
.background_wrap {
position: absolute;
background-color: rgba(19, 13, 6,0.5);
z-index: -1000;
width: 100%;
height: 100% ;
overflow:hidden;
background: url("Pics&Video/laoang6.jpg") no-repeat center;
background-size: cover;
}
.background_wrap::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 20%;
z-index: 1000;
}
.sub-content {
position: fixed;
width: 1000px;
height: 120px;
margin: 0 auto;
transition: 0.5s;
}
.sub-content.active {
background-color: rgba(0, 26, 26,0.7);
width: 100%
}
.sub-content.active ul li a {
background-color: rgba(0, 26, 26,0.7);
}
#list {
margin-right: 5px;
position:fixed;
margin-left: 780px;
margin-top: 20px;
}
ul {
margin-top:1px;
padding: 0px;
list-style: none;
color: white;
margin-right: 0px;
font-family: calibri;
font-weight: bold;
}
ul li {
float: right;
width: 130px;
font-family: courier new;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff ;
border-left: 1px solid #ffffff ;
border-top: 1px solid #ffffff ;
line-height: 25px;
text-align: center;
font-size: 13px;
font-weight: bolder;
margin-top: 35px;
margin-right: 3px;
}
ul li a {
color: white;
display: block;
margin-top: 2px;
font-weight: bolder;
text-decoration: none;
}
ul li a:hover {
background-color: green;
font-weight:bolder;
cursor: pointer;
color: white
}
ul li ul li {
display: none;
font-weight: bolder;
}
ul li:hover ul li {
display:block;
cursor: pointer;
color: white;
margin-top:1px;
margin-right: 0px;
position: center;
background-size: cover;
font-weight: bolder;
}
h1 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 60px;
text-transform: uppercase;
font-weight: bolder;
color: white;
margin-bottom: 6px;
}
h2 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 30px;
text-transform: uppercase;
font-weight: 300;
color: white;
padding-top: 14%;
}
.wrapper {
position: center;
width: 750px;
height: 100px;
margin-left:auto;
margin-right:auto;
margin-top: 150px;
font-size: 17px;
}
.image_wrap {
margin-top:20px;
height: 70px;
margin-left:55px;
}
.fl_image {
float: left;
margin-right:5px;
margin-bottom: 10px;
}
.content h6 {
font-family: courier new;
font-size: 13px;
text-transform: uppercase;
font-weight: 300;
color: green;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 100px;
}
.content p {
font-family: courier new;
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #ffffff;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 250px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery1 {
float: left;
position: absolute;
margin-top: 320px;
margin-left: 10px;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 300px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery2 {
float: left;
position: absolute;
margin-top: 840px;
margin-left: 10px;
}
.text4 {
margin-left: 360px;
font-size: 30px;
color: black;
margin-top: 220px;
margin-bottom:3px;
position: left;
float: left;
}
#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 (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@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>
<title> Hotels </title>
<link style="text/css" href="Hotel.css" rel="stylesheet" > </link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$(".sub-content").addClass('active');
}else{
$(".sub-content").removeClass('active');
}
})
});
</script>
<script
// 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";
}
</script>
</head>
<body>
<header>
<div class="background_wrap">
</div>
<div class="content">
<div class="sub-content">
<img class="image_wrap fl_image" src="Pics&Video\picture.png" height="100px" margin-left="5px" alt="Image One"/>
<div id="list" >
<ul>
<li><a> <i class="fas fa-file-signature"></i> Contact</a></li>
<li><a> <i class="fas fa-user"></i> About</a></li>
<li><a> Destination </i></a>
</li>
<li><a> Activities <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="Hotel Main.html"> Hotels</a></li>
<li><a> Restaurants</a></li>
<li><a> Festival</a></li>
</ul>
</li>
</ul>
</div>
<h6>Samar's Tourism</h6>
</div>
</div>
<div class="wrapper">
<h2>Search all travel deals, in one go</h2>
<h1> HOTEL </h1>
</div>
</header>
<main class="main1">
<div id="body_1">
<h2> Calbayog Hotel </h2> <h6> 2 Places </h6>
<h4> Baypark Hotel </h4>
<div class="gallery1">
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog1.jpg" alt="Cinque Terre" width="600" height="400" >
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog2.jpg" alt="Forest" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog3.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog4.jpg" alt="Forest" width="600" height="400">
</div>
</div>
<br>
<div class="text4">
<h4> Ciriaco Hotel </h4>
</div>
<div class="gallery2">
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco1.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco2.jpg" alt="Forest" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco3.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco4.jpg" alt="Forest" width="600" height="400">
</div>
</div>
</div>
</main >
<footer>
Footer
</footer>
</body>
</html>
最佳答案
这是我的纯 Javascript 和简单画廊的快速版本。 您可以轻松适应它!随时要求澄清!
var gallery = document.getElementById("gallery");
var imgs = gallery.children;
var modal = document.getElementById("modal");
var modal_img = modal.children[0];
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
modal_img.src = this.src;
modal.classList.add("show");
}
}
// Close when clicking anywhere on modal not on img
modal.onclick = function(e) {
if (e.target !== this)
return;
modal.classList.remove("show");
}#gallery img {
width: 75px;
cursor: pointer;
}
#modal {
display: none;
text-align: center;
}
#modal.show {
display: block;
}
#modal img {
width: 250px;
position: relative;
z-index: 3;
}
#modal:before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 2;
background-color: rgba(0,0,0,.8);
}<div id="gallery">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" />
<img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg" />
</div>
<div id="modal"><img src="" /></div>关于html - 带有 Javascript 的 HTML 和 CSS 模式图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54947185/