Question

我看了教程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">&nbsp;何を想像した？</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">&nbsp;何を想像した？</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，因为我在内容中包含了卡片动画。

Answer 1

如果用标准文本替换锚标签内的图像，它可以正常工作：

            <a href="#saku">Link One</a>
            <a href="#ssr">Link Two</a>

因此，问题很可能出在你的CSS中，那里存在冲突，你正在放置的图像元素。

您可能需要发布完整的代码，以便此处的人们可以更好地了解发生了什么。

多模态盒 - 纯CSS

1 个答案: