多模態盒 - 純CSS

我看了教程Pure CSS Animated Modal/Lightbox。即使將模態的相應鏈接改爲圖像，我也能得到正確的結果。問題是，無論何時添加其他圖像並將其鏈接到不同的模式，當打開頁面時，兩個模式的底部都會顯示出來。像這樣的東西。（圖1）當我點擊圖像時也會發生這種情況。（Image 2）Image Link 多模態盒 - 純CSS

我將所有圖像模態鏈接放在純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，因爲我在內容中包含卡片動畫。

來源

2016-02-27 Celeste Joyce

如果你只用標準文本替換錨標籤中的圖像，它工作正常，像這樣：

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

的問題，因此可能會在你的CSS，其中一些是相互衝突的，與圖像你正在放入的元素。

您可能需要發佈完整的代碼，以便此處的人員可以更好地瞭解發生了什麼。

來源

2016-02-27 11:43:16 dylankbuckley

感謝您回答我的問題。我已經發布了我正在使用的完整代碼。你介意再看一遍嗎？ –

多模態盒 - 純CSS

回答

相關問題