我想禁用模态图像后可点击的 2 个页脚链接(Go Up 和 Copyright)。
我尝试浏览互联网，但找不到任何解决方案。
我认为它可能与叠加有关，但我不确定也不知道如何正确使用它。
我添加了我的代码片段，如您在单击图像后看到的那样(没有图像，但它仍然是模态的)上行链接仍然有效
就像这里的图片: click me
/* Universal reset: */
*{
margin: 0;
padding: 0;
}
/* Body CSS (Background image, font) */
body{
font-size: 0.825em;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: Arial, Helvetica, sans-serif;
}
/* Chef Logo */
.img-logo {
position: relative;
top: 37px;
float: left;
width: 100px;
height: 100px;
background: #fcfcfc00;
right: 25px;
}
/* Welcome Text */
h1{
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-size: 3.5em;
padding: 0.5em 0 0;
text-transform: uppercase;
color: #ffffff;
position: relative;
top: 27px;
right: 35px;
}
/* Cooking Club Text */
h3{
font-family: forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-size: 2em;
font-weight: normal;
margin: 0 0 1em;
color: #ffffff;
position: relative;
top: 17px;
right: 30px;
}
/* Articles Headlines (Pasta, Salad, Chocolate) */
h2{
font-family: David;
text-decoration: ;
font-size: 2.2em;
font-weight: normal;
letter-spacing: 0.01em;
text-transform: uppercase;
color: #000000;
}
/* Articles Texts */
p{
font-family: Arial;
line-height: 1.5em;
padding-bottom: 1em;
}
/* Line between Articles Headelines and the Articles Texts */
.line{
/* The dividing line: */
height:1px;
background-color:#000000;
border-bottom:2px solid #efebe785;
border-bottom-color:#efebe785;
margin:1.3em 0;
overflow:hidden;
}
/* The clearfix hack to clear the floats: */
.clear:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Top Navigation Bar line */
nav{
font-family: Arial;
background-color:#ffffffe0;
padding:0;
right:0;
top:4em;
border:1px solid #00000094;
overflow: hidden;
}
/* The Navigation Bar Styling block*/
nav ul li{
display:inline-block;
}
/* The Navigation Bar Styling links */
nav ul li a{
color: #000000d9;
font-size: 20px;
text-decoration: none;
font-weight:bold;
display: block;
padding: 15px 10px ;
height: 100%;
margin: -1.9px;
}
/* The Navigation Bar Styling hover links */
nav ul li a:hover{
color: white;
background-color:#000000e0;
}
.activenav {
color: white;
background-color:#000000e0;
}
/* Article Size */
#page{
width:960px;
margin:0 auto;
position:relative;
}
/* Article Style */
article{
background-color:#ffffffe0;
margin:3em 0;
padding:20px;
border:1px solid #00000094;
/* black Transerent #a29b94a3 */
}
/* Article Picture Style */
figure{
border:1px solid #142830;
float:right;
height:300px;
margin-left:15px;
overflow:hidden;
width:500px;
}
.ImageAbout{
float:right;
height:500px; /* 620px */
margin-left:15px;
overflow:hidden;
width:300px; /* 340px */
}
/* All Footer Styling: */
footer{
margin-bottom:30px;
text-align:center;
font-size:0.825em;
}
/* "Article" Footer Styling: */
.footer{
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 225px;
background-color: #ffffffe0;
/* #efebe785 */
color: #000000;
/* Align all the text left so it lines up */
text-align: left;
border: 1px solid #00000094;
}
/* "Article" Footer "table": */
.left,
.right,
.center {
float: left;
position: relative;
width: 33%;
left: 15px;
top: 15px;
box-sizing: border-box;
padding-right: 15px;
padding-left: 15px;
margin-bottom:-2.5em;
}
/* Text on footer: */
footer a{
color:#000000;
background-color:#ffffffe0;
padding:2px 4px;
z-index:100;
position:relative;
border:1px solid #00000094;
text-decoration:none;
outline:none;
}
.footerfix {
text-indent: 2px;
}
footer a:hover{
text-decoration:none;
background-color:#000000e0;
color: white;
}
footer a.class1{
color:#000000;
background-color:#efebe700;
padding:1px 1px;
z-index:100;
position:relative;
border:none;
}
footer a.by{
float:left;
position: relative;
top: 11px;
}
footer a.up{
float:right;
top: 11px;
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* 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%;
}
}
/*Dot For Slide*/
.mySlides {display:none }
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0 }
nav .search-container {
float: right;
}
nav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
nav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #000000e0;
font-size: 17px;
border: none;
cursor: pointer;
}
.fa-search {
color: white;
}
nav .search-container button:hover {
background: #ccc;
}
.search-container button:hover .fa-search
{
color: #000000e0;
}
@media screen and (max-width: 600px) {
nav .search-container {
float: none;
}
nav a, nav input[type=text], nav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
nav input[type=text] {
border: 1px solid #ccc;
}
}<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Cook,Food">
<meta name="author" content="asd">
<!-- Refresh Website Every 5 Second -->
<meta HTTP-EQUIV="REFRESH" content="3600">
<title>Cooking Club | Gourmet Food in Your Kitchen</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Favicon Website -->
<link rel="shortcut icon" href="Images/Icon_Image.ico" type="image/x-icon">
<!--Script Links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section id="page"> <!-- Defining the #page section with the section tag -->
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Pasta </h2>
<div class="line"></div> <!-- Dividing line -->
<div class="articleBody clear">
<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
<!-- Image to Slide -->
<div class="w3-content w3-display-container">
<img class="mySlides myImg" src="Images/Pasta_Image_01.jpeg" alt="Pasta, Tasty" width="620" height="340">
<img class="mySlides myImg" src="Images/Pasta_Image_02.jpg" alt="Pasta, Special" width="620" height="340">
<img class="mySlides myImg" src="Images/Pasta_Image_03.jpg" alt="Pasta, Appetizing" width="620" height="340">
<!-- Make Buttons -->
<div class="w3-large w3-text-white ">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
<!--Make Dots -->
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<script>
// Get the modal
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.src;
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";
}
</script>
<!-- Slider Image Script -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
</div>
</figure>
<p>Pasta is a divine dish that you will find in almost every restaurant around the world. It is also the most famous dish in Italian culture which there are those who claim otherwise according to the urban legend of Marco Polo.
Legend has it that the one who brought pasta to the provinces of Italy is none other than Marco Polo, who carried the pasta from China in the distant 11th century as part of his travels around the world. Contrary to legend, there is evidence of the existence of pasta in Italy already in 400 BC. A billion Chinese are not wrong, but in this case, the Italians finished with the boot on top.
On our site you will receive a selection of pastas and sauces, rich in flavors you have not yet known and which you will not find anywhere else from an upgraded tomato sauce, special pesto sauce and rosa sauce, which is a combination of the two sauces mentioned earlier.</p>
<p>So what are you waiting for, To view all our favorite pasta recipes click here. </p>
</div>
</article>
<!-- Article 1 end -->
</section>
<footer> <!-- Marking the footer section -->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="footer">
<div class="left">
<br/>
<i class="fa fa-wechat" style="font-size:15px;"></i>
<font size="5">SOCIAL</font> <br/><br/>
<i class="fa fa-facebook" style="font-size:15px;"></i>
<a href="http://www.facebook.com" class="class1"><font size="3">Facebook </font> <br/><br/></a>
<i class="fa fa-twitter" style="font-size:15px;"></i>
<a href="http://www.Twitter.com" class="class1"><font size="3">Twitter </font> <br/><br/></a>
<i class="fa fa-youtube" style="font-size:15px;"></i>
<a href="http://www.Youtube.com" class="class1"><font size="3">Youtube </font> <br/><br/></a>
</div>
<div class="center">
<br/>
<i class="fa fa-headphones" style="font-size:15px;"></i>
<font size="5">SUPPORT</font> <br/><br/>
<i class="fa fa-phone" style="font-size:15px;"></i>
<font size="3">Tellphone</font> <br/><br/>
<i class="fa fa-envelope" style="font-size:15px;"></i>
<font size="3">Email</font>
</div>
<div class="right">
<br/>
<i class="fa fa-plus" style="font-size:15px;"></i>
<font size="5">EXTRA</font> <br/><br/>
<i class="fa fa-star" style="font-size:15px;"></i>
<font size="3">Chefs</font> <br/><br/>
<div class=footerfix>
<i class="fa fa-info" style="font-size:15px;"></i>
<font size="3">Facts</font>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="#" class="up">Go UP</a>
<a href="Home.html" class="by">Copyright 2018 - CookingClub.com</a> -->
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Included -->
<script>
var bgcount = 10;
function changebg() {
var num = Math.ceil( (Math.random() * bgcount) -1 );
document.body.background = 'Images/'+'Background_Image_0'+num+'.jpg';
document.body.style.backgroundRepeat = "norepeat";
}
</script>
<script>
changebg();
</script>
</body>
</html>最佳答案
问题是您的页脚a 的z-index 为100，高于 的 只有 1。您应该将 z-index。 modal.modal 的 z-index 增加到 101。
关于javascript - 我想在使用图像模式后禁用元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48270635/