正如下面的小提琴所示，通过点击右上角的x来关闭模态在移动设备中不起作用。尝试在SO上搜索答案已经变得毫无结果。任何帮助都会很棒，并解释为什么会出现这种情况。
https://jsfiddle.net/csapidus/f6z9f5eq/5/
原始代码
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>Padauk and Maple Brick-Style, Laser-Etched Cutting Board</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 rel="stylesheet" type="text/css" href="../style.css">
<!-- <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%;
}
</style>
<style>
/******************** 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;
}
/* Modal Content (image) Variation for Columns Page */
.modal img {
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>
</head>
<body>
<div class="footerU">
<h1>Padauk and Maple Cutting Board</h1>
</div>
<div class="intro_unlim">
<p> This padauk and maple brick-style, laser-etched cutting board was made as a shared gift for my parents (mother's and father's day). This is was my first experience making a cutting-board. The most severe trap I fell to was failing to apply enough wood-glue, which was caught early enough to not be a problem. After cutting, gluing, planining, recutting, regluing, and sanding, the cutting board was laser etched with a simple message, and then coated with mineral oil. + Cat Tax </p>
<p> Estimated Building Cost: $65.00</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/3/2847/34147175446_e7ebe5cdc4_b.jpg"/>
</div>
<div id="myModal1" class="modal" data-index="1">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption">pre-etched and pre-brushed cutting board on work desk</div>
</div>
<div class="grid-item">
<img id="Img2" class = "modal-img" data-index = "2" src="https://c1.staticflickr.com/5/4172/34699825346_be85d4d136_b.jpg"/>
</div>
<div id="myModal2" class="modal" data-index="2">
<span class="close">×</span>
<img class="modal-content" id="img02">
<div id="caption">cutting board placed inside laser-cutter II</div>
</div>
<div class="grid-item">
<img id="Img3" class = "modal-img" data-index = "3" src="https://c1.staticflickr.com/5/4169/34355294230_9c84dc0d30_b.jpg"/>
</div>
<div id="myModal3" data-index="3" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img03">
<div id="caption">final product: etched and mineral oil brushed padauk and maple checkered cutting board</div>
</div>
<div class="grid-item">
<img id="Img4" class = "modal-img" data-index = "4" src="https://c1.staticflickr.com/5/4166/34358593900_22486937d5_b.jpg"/>
</div>
<div id="myModal4" data-index="4" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img04">
<div id="caption">3-D model with dimensions of padauk and maple checkered cutting board</div>
</div>
<div class="grid-item">
<img id="Img5" class = "modal-img" data-index = "5" src="https://c1.staticflickr.com/5/4182/34699822676_9bb2262b8d_b.jpg"/>
</div>
<div id="myModal5" data-index="5" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img05">
<div id="caption">cutting board placed inside laser-cutter II</div>
</div>
<div class="grid-item">
<img id="Img6" class = "modal-img" data-index = "6" src="https://c1.staticflickr.com/5/4194/33897860364_bfd67c08d1_b.jpg"/>
</div>
<div id="myModal6" data-index="6" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img06">
<div id="caption">Georgia Tech Biomedical Engineering Machine Shop laser-cutter software interface</div>
</div>
<div class="grid-item">
<img id="Img7" class = "modal-img" data-index = "7" src="https://c1.staticflickr.com/5/4167/34740177975_a70a99b992_b.jpg"/>
</div>
<div id="myModal7" data-index="7" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img07">
<div id="caption">cutting board post-etching, prior to being brushed with mineral oil </div>
</div>
<div class="grid-item">
<img id="Img8" class = "modal-img" data-index = "8" src="https://c1.staticflickr.com/5/4188/33931137563_c25cfc2718_b.jpg"/>
</div>
<div id="myModal8" data-index="8" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img08">
<div id="caption">final cutting board brushed with mineral oil and set out to dry</div>
</div>
<div class="grid-item">
<img id="Img9" class = "modal-img" data-index = "9" src="https://c1.staticflickr.com/5/4188/33931133583_4ebdbfe792_b.jpg"/>
</div>
<div id="myModal9" data-index="9" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img09">
<div id="caption">lazy cat tax</div>
</div>
</div>
</div>
<div class="return">
<div id="button"><a href="../index.html">Return to Homepage</a></div>
</div>
</body>
<script src="../jquery-3.2.1.min.js"></script>
<script src='../masonry.pkgd.min.js'></script>
<!-- <script src="../bootstrap.min.js"></script> -->
<script src="../imagesloaded.pkgd.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');
});
});
</script>
<script>
// 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>
<div class="footerU2">
<h1></h1>
</div>
</html>