html - 纯 CSS 动画模式/灯箱

Question

我正在使用 PHP Academy 教程中的 CSS Animated Modal。我已经在其他元素中这样做了，但现在我不知道为什么不起作用。问题看起来是目标选择器，当我点击链接时不起作用。你能帮帮我吗？

所以，这发生在这个页面:http://www.sarosacramento.com/v2/#produtos结果应该是这样的，但他的链接就像 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..) 的模态框位于屏幕中央。因此，例如，当您单击苹果图标时，它会将您偏移到中间屏幕。

此外，由于您在 ma​​in.js 的 a.click() 中返回了 false，因此模态框未显示。

所以要解决整个问题..

1.转到 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，因此当您单击链接时您的页面不会下降。

干杯! :)

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