我看了教程Pure CSS Animated Modal/Lightbox .即使我将模式的相应链接更改为图像，我也能够得到正确的结果。问题是，每当我添加另一个图像并将其链接到不同的模态时，当我打开页面时，两个模态的底部都会出现。像这样的东西。 (图 1)当我点击图像时也会发生这种情况。 (图 2)Image Link
我将所有图像模式链接放在一个纯 css 选项卡中。这是我使用的代码。
编辑(我在我的页面上使用的完整 CSS)
body {
background-image: url('https://lh4.googleusercontent.com/-MohfCSihE2I/VGRnxqZNuFI/AAAAAAAAADE/SgiIb4GEIY8/s2048/back.gif');
background-color: white;
color: black;
font-size: 16px;
font-family: trebuchet ms, helvetica, sans-serif;
letter-spacing: 3px;
}
@font-face {
font-family: bf-font;
src: url(http://bf.amebagames.com/font/bf-font.woff") format('woff');
}
.bf {
font-family: bf-font;
}
.cardbg {
background-image: url('https://lh3.googleusercontent.com/-kV3vTS7WzFQ/Vq8iIGo8mOI/AAAAAAAADS4/qv3O9n1L0gI/s2048-Ic42/cmnTitleRed.png');
text-align: center;
color: #FFF;
border-radius: 3px;
}
.cardattri {
font-family: bf-font;
font-size: 26px;
text-align: center;
}
.cardtitle {
font-size: 20px;
color: #FFF;
text-align: center;
}
.story {
background-image: url('https://lh3.googleusercontent.com/-AVgAM5nK6ec/Vq8iIDN1uyI/AAAAAAAADSw/dThSw3Re6-E/s2048-Ic42/bg%252520brown.png');
width: 200px;
height: 26px;
margin: 0px 75px;
border-radius: 5px;
}
/* TABS */
.tabs {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.tabs:after {
content: "";
clear: both;
display: block;
height: 542px;
}
.tabs li {
float: left;
}
.tabs li > input {
display: none;
}
.tabs li > label {
display: inline-block;
border: 1px solid #000;
border-right-width: 0;
border-bottom-width: 0;
height: 30px;
line-height: 30px;
padding: 5px 20px;
cursor: pointer;
}
.tabs li:last-child > label {
border-right-width: 1px;
}
.tabs .tab-content {
display: none;
position: absolute;
left: 0;
padding: 20px;
border: 1px solid #000;
width: 768px;
height: 500px;
overflow-y: scroll;
}
/* TABS Functional */
.tabs li > input:checked + label {
background-color: #DDD;
}
.tabs li > input:checked ~ .tab-content {
display: block;
}
/* MODAL */
.modal-container {
position: fixed;
background-color: #FFF;
background-image: url('https://lh3.googleusercontent.com/-J73bzJ9PVJE/Vq8iIGmBxlI/AAAAAAAADS0/-uNM7fG2sI4/s2048-Ic42/bg_new%252520no%252520border%2525202.png');
width: 100%;
max-width: 350px;
height: 100%;
max-height: 550px;
left: 50%;
padding: 5px;
border: 2px solid #512d2d;
border-radius: 5px;
-webkit-transform: translate(-50%, 200%);
-ms-transform: translate(-50%, 200%);
transform: translate(-50%, 200%);
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.modal:before {
content: "";
position: fixed;
display: none;
background-color: rgba(0,0,0,.8);
top: 0;
left: 0;
height: 100%;
width: 100%
}
.modal:target:before {
display: block;
}
.modal:target .modal-container {
top: 18%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
a.boxclose {
float: right;
margin-right: -18px;
margin-top: -16px;
width: 22px;
height: 22px;
text-align: center;
text-decoration: uppercase;
color: #947a4e;
font-size: 20px;
border-radius: 12px;
background-color: #FFF;
box-shadow: 0px 0px 2px
rgba(0,0,0,0.4);
}
a.boxclose:link {
text-decoration: none;
}
.boxclose::before {
content: "";
}
#modal-close {}
/* CARD ANIMATION */
.panel {
width: 350px;
height: 438px;
margin: auto;
position: relative;
-moz-border-radius: 0px 50px 0px 50px;
-webkit-border-radius: 0px 50px 0px 50px;
-o-border-radius: 0px 50px 0px 50px;
border-radius: 0px 50px 0px 50px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
overflow: hidden;
}
.card {
width: 350px;
height: 438px;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
background-repeat: no-repeat;
width: 230px;
-moz-border-radius: 0px 50px 0px 50px;
-webkit-border-radius: 0px 50px 0px 50px;
-o-border-radius: 0px 50px 0px 50px;
border-radius: 0px 50px 0px 50px;
}
.back {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background-repeat: no-repeat;
width: 230px;
-moz-border-radius: 50px 0px 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;
-o-border-radius: 50px 0px 50px 0px;
}
.panel:hover {
-moz-border-radius: 50px 0px 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;
-o-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
overflow: hidden;
}
.panel:hover .front {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .back {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
HTML代码
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="king" checked>
<label for="king">King</label>
<div class="tab-content">
<a href="#saku"><img src="https://lh3.googleusercontent.com/-REZUMNTK5vA/VINOSxepDYI/AAAAAAAACA4/2ixTyaJIp4U/s2048-Ic42/1a.jpg" width="250px"></a><br>
<a href="#ssr"><img src="https://lh3.googleusercontent.com/-e2gN0x-vlr8/VVDGF5XpVzI/AAAAAAAACA4/b1SibabLkpA/s2048-Ic42/11a.jpg" width="250px"></a>
<div class="modal" id="saku">
<div class="modal-container">
<a href="#modal-close" class="boxclose"><span class="bf">x</span></a>
<div class="cardbg">
<span class="cardattri">q</span>
<span class="cardtitle">[ﾐﾀﾞﾗな寝相] Saku Kagami (SSR)</span>
</div><br>
<div class="story" style="font-size: 14px; text-align: center;"><img src="https://lh3.googleusercontent.com/-UFyiWZmr1AA/VGRnyG-RtQI/AAAAAAAAADU/LWENjijPlMA/s2048-Ic42/icon_story.png" width="14px" height="16px"> 何を想像した？</div><br>
<div class="panel">
<div class="front card">
<img src="https://lh3.googleusercontent.com/-REZUMNTK5vA/VINOSxepDYI/AAAAAAAACA4/2ixTyaJIp4U/s2048-Ic42/1a.jpg" alt="SSR1 Card" width="350px" height="438px">
</div>
<div class="back card">
<img src="https://lh3.googleusercontent.com/-r3CHpi4DxSw/VfVhhUpmDaI/AAAAAAAACA4/VldO2dZdhno/s2048-Ic42/1c.jpg" alt="SSR 1 CG" width="350x" height="438px">
</div>
</div><br>
</div>
</div>
<div class="modal" id="ssr">
<div class="modal-container">
<a href="#modal-close" class="boxclose"><span class="bf">x</span></a>
<div class="cardbg">
<span class="cardattri">q</span>
<span class="cardtitle">[ﾐﾀﾞﾗな寝相] Saku Kagami (SSR)</span>
</div><br>
<div class="story" style="font-size: 14px; text-align: center;"><img src="https://lh3.googleusercontent.com/-UFyiWZmr1AA/VGRnyG-RtQI/AAAAAAAAADU/LWENjijPlMA/s2048-Ic42/icon_story.png" width="14px" height="16px"> 何を想像した？</div><br>
<div class="panel">
<div class="front card">
<img src="https://lh3.googleusercontent.com/-e2gN0x-vlr8/VVDGF5XpVzI/AAAAAAAACA4/b1SibabLkpA/s2048-Ic42/11a.jpg" alt="SSR1 Card" width="350px" height="438px">
</div>
<div class="back card">
<img src="https://lh3.googleusercontent.com/-d_7dx1qF0Pc/VfViJRPBiEI/AAAAAAAACA4/UairgGEi-jc/s2048-Ic42/11c.jpg" alt="SSR 1 CG" width="350x" height="438px">
</div>
</div><br>
</div>
</div>
</div>
</li>
</ul>
我该如何解决这个问题？
注意:模态包含很多 div，因为我在内容上包含了卡片动画。
最佳答案
如果您只用标准文本替换 anchor 标记内的图像，它就可以正常工作，如下所示:
<a href="#saku">Link One</a>
<a href="#ssr">Link Two</a>
因此，问题很可能出在您的 CSS 中，其中某些内容与您放入其中的图像元素存在冲突。
您可能需要发布您的完整代码，以便这里的人可以更好地了解正在发生的事情。
关于html - 多模态框 - 纯 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35669038/