javascript - 有没有办法让 IMG 标签上的边距可点击以关闭模式？
问题描述
我正在使用 W3 学校教程来帮助我处理这个项目中的一些 ui 组件。
现在，图像模式上的边距阻止用户单击图像的侧面以退出模式。除了单击 X 关闭模态框外，我还希望通过单击图像周围模态框的“空白”空间来为用户提供关闭模态框的选项。我图像上的边距阻止该区域可单击以关闭模式。
我可以在我的 css 或 html 中进行哪些更改以允许单击边距以关闭模式？
代码：https ://codepen.io/jkramer25/project/editor/AooxzJ
现场演示：https ://000582278.codepen.website/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="assets/css/style.css">
<title>Horizontal Timeline</title>
</head>
<body>
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
<div class="cd-h-timeline__container container">
<div class="cd-h-timeline__dates">
<div class="cd-h-timeline__line">
<ol>
<li><a href="#0" data-date="01/01/1839" class="cd-h-timeline__date cd-h-timeline__date--selected">1839</a></li>
<li><a href="#0" data-date="28/02/1841" class="cd-h-timeline__date">1841</a></li>
<li><a href="#0" data-date="28/02/1902" class="cd-h-timeline__date">1902</a></li>
<li><a href="#0" data-date="28/02/1904" class="cd-h-timeline__date">1904</a></li>
<li><a href="#0" data-date="28/02/1912" class="cd-h-timeline__date">1912</a></li>
<li><a href="#0" data-date="28/02/1918" class="cd-h-timeline__date">1918</a></li>
</ol>
<span class="cd-h-timeline__filling-line" aria-hidden="true"></span>
</div> <!-- .cd-h-timeline__line -->
</div> <!-- .cd-h-timeline__dates -->
<ul>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--next">Next</a></li>
</ul>
</div> <!-- .cd-h-timeline__container -->
<div class="timeline-indicators-flex container"><!--Previous, Next, Swipe tip-->
<div class="timeline-indication color-contrast-medium align-left">
<p>Previous</p>
</div>
<div class="timeline-indication color-contrast-medium align-center">
<p id="swipe-tip">Use arrows and select year for history details</p>
</div>
<div class="timeline-indication color-contrast-medium align-right">
<p>Next</p>
</div>
</div>
<div class="cd-h-timeline__events">
<ol>
<!-- ------------------------SLIDE 1-1839----------------------- -->
<li class="cd-h-timeline__event cd-h-timeline__event--selected text-component">
<div class="cd-h-timeline__event-content container">
<!--
<div class="jumplinks-timeline">
<a href="#hammacher-history">
<div class="jumplinks-timeline-button">Hammacher History</div>
</a>
<a href="#us-history">
<div class="jumplinks-timeline-button">US History</div>
</a>
</div>
-->
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1839</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click images to enlarge</p>
<img class="myImg" src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History-100x100_1.jpg" data-large-src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History.jpg" alt="Albert Hammacher">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Albert Hammacher, the man who would eventually provide half of our company's name, is born on February 16, 1839 in Leichlingen, a town in the North Rhine-Westphalia region of Germany. Hammacher would come to be viewed as one of the leading figures in the hardware industry in the U.S. and Germany during the late 19th and early 20th centuries.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="myImg"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_US_History-100x100.jpg" style="width: 100%;max-width: 100px;" data-large-src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_US_History.jpg" alt="George Armstrong Custer">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
United States Army officer George Armstrong Custer is born in Ohio. Custer developed a strong reputation leading Union
troops during the Civil War-despite graduating last in his class at West Point-and attained the rank of brigadier
general at age 23. After the Civil War, he was dispatched to the west to fight in the Indian Wars. Custer and all the
men with him (two of his brothers among them) were killed at the Battle of the Little Bighorn in 1876, in a battle that
has come to be known as "Custer's Last Stand."
</p>
</div>
</li>
<!-- ------------------------SLIDE 2-1841----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1841</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="myImg"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_HS_History-100x100.jpg" data-large-src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_HS_History.jpg" alt="William Schlemmer">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
William Schlemmer, whose name will come to be associated with a landmark New York City store and America's
longest-running catalog, is born on April 20, 1841 in the Westphalia region of Germany.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="myImg"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_US_History-100x100.jpg" data-large-src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_US_History.jpg" alt="William Henry Harrison">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
William Henry Harrison served the shortest tenure of any U.S. president, just 32 days, and became the first to die in
office. Vice President John Tyler is sworn in as the nation's 10th president on April 4, 1841.
</p>
</div>
</li>
</ol>
</div> <!-- .cd-h-timeline__events -->
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<div>
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×
<div class="tooltiptext">
<p>Close</p>
</div>
</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<!--Top button-->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
<script src="assets/js/swipe-content.js"></script> <!-- A Vanilla JavaScript plugin to detect touch interactions -->
<script src="assets/js/main.js"></script>
<!--<script src="assets/js/timeline-scrollToTopBtn.js"></script>-->
<!--Top button script-->
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function () {
modal.style.display = "block";
var newSrc = this.dataset.largeSrc;
modalImg.attr('src', newSrc);
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";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
/* Style the Image Used to Trigger the Modal */
.myImg {
border-radius: 5px;
cursor: zoom-in;
transition: 0.3s;
}
.myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* 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: 16px auto;
display: block;
}
/* 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 {
-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: 0px;
right: 15px;
color: #f1f1f1;
font-size: 60px;
font-weight: bold;
transition: 0.3s;
text-align: center;
}
.close:hover,
.close:focus{
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.tooltiptext{
font-size: 16px;
text-align: center;
margin-top: -16px !important;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 75%;
}
}
解决方案
推荐阅读
- ruby-on-rails - 当它不是按字母顺序逻辑时按大小名称排序项目？
- date - Google 表格 - 日期格式显示问题
- kubernetes - 如何在 Kubernetes 中创建基本身份验证？
- javascript - 在单击图像上打开模态（使用单个模态的多个图像）
- qt - 在 QTextEdit 中使用链接
- for-loop - SSIS 中的 For 循环容器（使用嵌套 for 循环）
- algorithm - 求解循环关系，其中偶数和奇数值有单独的关系
- r - 如何计算时差，并将其与开始时间相加？
- node.js - 使用 MEAN 创建一个日历应用程序来监听变化
- spring - 销毁给定包的bean并在每个黄瓜场景（测试）之前再次创建以防止场景之间的状态泄漏