0
我有一個當前的模式設置，它使用jquery腳本來允許單個頁面上的多個模式。目前，用戶選擇一個圖像，並且相同的圖像作爲模式（event.target）彈出。在這種情況下，我希望用戶能夠選擇一串文本，從而彈出相關圖像。我很難修改我的代碼來這樣做。爲了清楚起見，我將兩個實例放在一個jsfiddle中。任何幫助將非常感激。調整鏈接到文本的圖像模式的JQuery代碼
https://jsfiddle.net/csapidus/mh3hysrr/12/
是在的jsfiddle相同的代碼如下：
<title>[BMED] Acrylic Breakdancing Contraption</title>
<link rel="icon" href="https://c1.staticflickr.com/5/4304/35858762401_3288711c9e_o.png">
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<style>
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: ;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 32.55%;
margin-bottom: 10px;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
/******************** Image Modals ********************/
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 1.0;}
/* 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%;
}
}
</style>
<body>
<div class="footerU">
<h1>[BMED] Acrylic Breakdancing Contraption</h1>
</div>
<div class="intro_unlim">
<p> The **** final project required students to develop a contraption with at least three connected moving parts. I elected to model a breakdancer's legs as he prepares for a headspin. Unfortunately, the final product came out looking like more of an upside down crab. The legs are made of thin acrylic, the wood for the base is walnut, and the wood for the body is paduak. </p>
<p> Estimated Building Cost: $35.00</p>
<br>
<p> Clicking this text should open up a modal that presents the first image</p>
<p> Clicking this text should open up a modal that presents the second image</p>
</div>
<div class="full">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img id="Img1" class = "modal-img" data-index = "1" src="https://c1.staticflickr.com/5/4352/36316868716_a33d16e02e_b.jpg"/>
</div>
<div id="myModal1" class="modal" data-index="1">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption">paduak body of the contraption (cut using a jigsaw, and then sanded) nailed to rectangular walnut base</div>
</div>
<div class="grid-item">
<img id="Img2" class = "modal-img" data-index = "2" src="https://c1.staticflickr.com/3/2945/33377180683_9c7b27232f_b.jpg"/>
</div>
<div id="myModal2" class="modal" data-index="2">
<span class="close">×</span>
<img class="modal-content" id="img02">
<div id="caption">final product: paduak contraption with acrylic legs, a walnut base, and googley eyes</div>
</div>
</div>
</div>
<div class="return">
<div id="button"><a href="../index.html">Return to Homepage</a></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<script>
// JQuery Method for Multiple Modals
$(function() {
$('body').on('click', '.modal-img', function(event) {
var $img = $(event.target);
var index = $img.data('index');
var $modal = $("#myModal" + index);
$modal.find('img').attr('src', $img.attr('src'));
$modal.find('#caption').text($img.attr('alt'));
$modal.css('display', 'block');
});
$('body').on('click', '.modal .close', function(event) {
var $modal = $(event.target).closest('.modal');
$modal.css('display', 'none');
});
});
// JQuery Method for Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer',
gutter: 10
});
$grid.imagesLoaded().progress(function() {
$grid.masonry('layout');
});
</script>
</html>