您好,我想知道如何在不同的图像上动态加载模态。这是我当前的网页。
假设当我点击 life of pi 图像时,这是弹出的模态。
我希望其他图像也能发生同样的事情。假设如果我单击“追风筝的人”图像,它会打开一个模式,左侧是追风筝的人图像,右侧是文本。
这是我当前的代码
$(document).ready(function() {
var $modal = $("#myModal");
$("#lifeofpi").click(function() {
$modal.show();
});
$modal.find('.close').click(function() {
$modal.hide();
});
});
/* 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.7); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 700px;
height: 500px;
background-color: #101010;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modallifeofpi {
cursor: pointer;
height: 160px; // height
//width: 30%; // width
border: 5px solid white;
display: inline;
margin-top:0px;
position: absolute;
}
.modalheader {
color:white;
margin:0;
margin-left: 470px;
}
.modalheadertext {
color:white;
margin-left: 350px;
margin-top:40px;
}
.review-img {
cursor: pointer;
height: 160px; // height
//width: 30%; // width
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='images'>
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img> </img>
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img>
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img>
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img class="modallifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<h1 class="modalheader">Life of pi</h1>
<h2 class="modalheadertext">Published:</h2>
</div>
</div>
最佳答案
您可以只绑定(bind)所有图像并将图像信息传递给模态。
$(document).ready(function() {
var $modal = $("#myModal");
$(".images img").click(function() {
$modal.find('img.modallifeofpi').attr('src',$(this).attr('src'));
$modal.find('.modalheader').text($(this).attr('alt'));
$modal.show();
});
$modal.find('.close').click(function() {
$modal.hide();
});
});
/* 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.7); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 700px;
height: 500px;
background-color: #101010;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modallifeofpi {
width: 300px;
height: 450px;
border: 5px solid white;
display: inline;
margin-top:0px;
position: absolute;
}
.modalheader {
color:white;
margin:0;
margin-left: 470px;
}
.modalheadertext {
color:white;
margin-left: 350px;
margin-top:40px;
}
.review-img {
cursor: pointer;
height: 160px; // height
//width: 30%; // width
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='images'>
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img> </img>
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img>
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img>
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img class="modallifeofpi" src="./images/lifeofpi.jpg"></img>
<h1 class="modalheader">Life of pi</h1>
<h2 class="modalheadertext">Published:</h2>
</div>
</div>
关于javascript - 如何动态加载模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42715168/