嗨,我编写了一段代码,以便在单击图像后我可以打开模式。例如,如果我单击 pi 书封面的生命,它将打开一个显示有关它的信息的模式。但由于某种原因它不起作用,我不确定为什么。另请注意,pi 的生命周期只有一个唯一的 id,因为我首先只在一张图像上测试它。代码如下
$(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.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 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;
}
.review-img {
cursor: pointer;
}
<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="./images/lifeofpi.jpg"></img>
<img class="review-img" src="./images/kiterunner.jpg"></img>
<img class="review-img" src="./images/starwars.jpg"></img>
<img class="review-img" src="./images/twilight.jpg"></img>
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
最佳答案
您需要通过使用 show()
更改 css 属性 display: none
来使模式可见。
$(function(){
var $modal = $("#myModal");
$(".review-img").each(function() {
var $image= $(this);
$image.on("click", function() {
var url = '/bookDetails/' + $image.data("bookid") + '.html';
// Test:
url = 'https://httpbin.org/html';
$modal.find('.modal-content p').html('Loading...').load(url);
$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.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 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;
}
.review-img {
cursor: pointer;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='images'>
<img class="review-img" data-bookid="lifeOfPi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="Life of Pi"></img>
<img class="review-img" data-bookid="kiteRunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="Kite Runner"></img>
<img class="review-img" data-bookid="starWars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="Star Wars"></img>
<img class="review-img" data-bookid="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>
<p>Book details loading...</p>
</div>
</div>
关于javascript - 如何使用 jquery .load 打开模态框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42708281/