纯 CSS 动画 Modal/Lightbox

Question

我正在使用来自 PHP 学院教程的 CSS 动画模式。我已经在其他项目中这样做了，但现在我不知道为什么不起作用。问题看起来是目标选择器，当我点击 link 时不起作用。你能帮帮我吗？

所以，这发生在这个页面中：http://www.sarosacramento.com/v2/#produtos 结果应该是这样的，但是他 link 像 div 是按顺序排列的（在 html 中是）：http://www.sarosacramento.com/v2/#oranges

/*******************

Produtos

*********************/

#produtos * {
 border:none;
 text-decoration:none;
 }

#produtos {
 position:relative;
 min-height:660px; 
 background-color:#9C3;
 }

.product {
 display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
 text-align:center;
 width:90%;
 
 -webkit-justify-content: space-around; 
   justify-content: space-around;
 
 margin-top:100px;
 }
 
.prod-it img {
 height:250px;
 width:250px;
 margin:30px auto;
 border-radius:50%;
 
 -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
 }
 
.prod-it img:hover {
 -webkit-transform:rotate(360deg); /* Safari and Chrome */
    -moz-transform:rotate(360deg); /* Firefox */
    -ms-transform:rotate(360deg); /* IE 9 */
    -o-transform:rotate(360deg); /* Opera */
     transform:rotate(360deg);
}
 
.prod-it h2 a {
 position:relative;
 color:#360;
 background:rgba(255,255,255,.2);
 padding:5px 10px;
 border:2px solid #360;
 border-radius:10px;
 
 -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
 }
 
.prod-it h2 a:hover {
 background:rgba(255,255,255,.5);
}




/*******************************************************************************************************
******************      MODAL CSS      ***************************************************************
*********************************************************************************************************/

.modal-container {
 position:fixed;
 background-color:#ddd;
 border:1px solid #333;
 width:70%;
 max-width:700px;
 min-height:350px;
 max-height:90%;
 overflow:hidden;
 left:50%;
 top:50%;
 padding:20px;
 border-radius:5px;
 z-index:200;
 
 -webkit-transform: translate(-50%, -200%);
 -ms-transform: translate(-50%, -200%);
 transform: translate(-50%, -200%);
 
 -webkit-transition:transform 200ms ease-out;
 -ms-transition: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%;
 z-index:199;
 }
 
.modal:target:before {
 display:block;
 }

.modal:target .modal-container {
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
 }
 


.modal-close {
 display:none;
 font-family:"Open Sans", "Bebas Neue", Helvetica, Arial, sans-serif;
 font-size:16px;
 font-weight:700;
 color:#fff;
 position:relative;
 float:right;
 z-index:201; 
 background-color:#9C3;
 margin:0;
 padding:5px 10px;
 border: 1px solid #333;
 border-radius: 8px;
 }
 
.modal-close:hover {
 background-color:#333;
 color:#ccc;
 }
 
.modal:target .modal-close {
 display:block;
 }
 
#modal-close {
 }

 <!-- Produtos -->
 <div id="produtos" class="animatedParent" data-sequence='500'>
    
     <header>
   <h1>Produtos</h1>
  </header>
  
     <div class="product">
        <div class="prod-it p1 animated bounceInUp" data-id='1'><a href="#oranges"><img src="img/item-1.jpg" /></a><br /><h2><a href="#oranges">Laranjeiras</a></h2></div>
        <div class="prod-it p2 animated bounceInUp" data-id='2'><a href="#lemons"><img src="img/item-2.jpg" /></a><br /><h2><a href="#lemons">Limoeiros</a></h2></div>
        <div class="prod-it p3 animated bounceInUp" data-id='3'><a href="#apples"><img src="img/item-3.jpg" /></a><br /><h2><a href="#apples">Macieiras</a></h2></div>
     </div>
        
        <div class="modal" id="oranges">
         <div class="modal-container">
            <a href="#modal-close" class="modal-close">X Fechar</a>
             <p>I love cats</p>
             </div>
        </div>
            
  <div class="modal" id="lemons">
         <div class="modal-container">
            <a href="#modal-close" class="modal-close">X Fechar</a>
             <p>I love cats</p>
   </div>
        </div>
        
        <div class="modal" id="apples">
         <div class="modal-container">
            <a href="#modal-close" class="modal-close">X Fechar</a>
             <p>I love cats</p>
         </div>
        </div>
        
        
    </div>

Answer 1

带有#(apples, oranges..) 的模态框位于屏幕中央。因此，例如，当您单击苹果图标时，它会将您偏移到中间屏幕..

此外，由于您在 main.js 中 return 在 a.click() 中输入了 false，模态框也不会显示。

所以要解决整个问题..

1.Go 到 main.js 并向下滚动并找到此代码，然后像这样输入 "return true"：

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        if($(this).attr('name') == "modal") return true; 
            else return false;
      }
    }
  });
});

2。找到你的 style.css 并输入这段代码：

    .modal {
        position: fixed;
        top: 0;
        z-index:3;
    }

所以这种风格做到了

scrollTop: target.offset().top

从顶部偏移 0，因此当您单击 link 时您的页面不会下降。

干杯！ :)

*编辑：我将 return true 设置为其他函数。

纯 CSS 动画 Modal/Lightbox

Pure CSS Animated Modal/Lightbox

html

css

modal-dialog