Question

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

因此，在此页面中会发生这种情况：http://www.sarosacramento.com/v2/#produtos 结果应该是这样，但是他像div这样的链接是顺序的（在html中）：http://www.sarosacramento.com/v2/#oranges

＆＃13;

/*******************

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 {
	}

＆＃13;

 <!-- 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>

＆＃13;

Answer 1

带＃（苹果，橘子......）的模态位于屏幕的中心。因此，当您单击苹果图标时，它会将您偏移到该中间屏幕..

此模式也不会显示，因为您在 main.js 的a.click（）中返回false。

所以解决整个问题..

1.转到main.js并向下滚动查找此代码，并将＆＃34;返回true＆＃34;像这样：

$(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设置为其他函数。

纯CSS动画模态/灯箱

1 个答案: