기기에서 팝업으로 돌아 가기

팝업 링크가있는 간단한 페이지를 만듭니다. 데스크톱에서 잘 작동합니다.기기에서 팝업으로 돌아 가기

올바른 방법으로 문제를 해결하는 방법을 모르겠다. 내 말은, 나는 진절머리 나는 해결책을 찾을 수 있지만 올바른 것을 알고 싶습니다. 휴대 전화에서 팝업 이미지에서 뒤로 클릭하면 페이지 상단이 아닌 기본 페이지 중간으로 돌아갑니다. 당신이를 닫 그렇게 할 때,

online page

html, a {text-decoration:none;} 
 

 
div {margin:0 auto 10px auto; height:200px; width:200px} 
 

 
h1 {font: normal 90px Helvetica, Sans-Serif; 
 
letter-spacing: 0.5px; 
 
line-height:1px; 
 
position: relative; 
 
top:100px; 
 
text-align: center; 
 
margin: 0; 
 
left:0; 
 
right:0; 
 
font-weight: 800; 
 
color:#000000} 
 

 

 
.popup { 
 
position: absolute; 
 
padding-top:30px; 
 
width: 100%; 
 
height: 100%; 
 
display: none; 
 
text-align:center; 
 
z-index: 200; 
 
opacity:1; 
 
} 
 

 
.popup:target { 
 
display: block; 
 
-webkit-animation-name: fadein 0,2s; 
 
animation-name: fadein; 
 
animation-duration: 0.2s; 
 
} 
 
.popup img { 
 
padding: 4px; 
 
width: 80%; 
 
z-index: 120; 
 
border: solid 1px gray; 
 
cursor: pointer; 
 
background-color:#FFFFFF; 
 
} 
 

 
@media only screen and (max-width: 540px) { 
 
div {margin:0 auto 10px auto; height:200px; width:auto} 
 

 
}

<body bgcolor="gray"> 
 
<div class="button" style="background-color:#049EA4;"><a href="#01"><h1>01</h1></a> 
 
</div> 
 
<div style="background-color: #F1FB00"><a href="#02"><h1>02</h1></a> 
 
</div> 
 
<div style="background-color: #1779F0;"><a href="#03"><h1>03</h1></a> 
 
</div> 
 
<div style="background-color: #FF00CF;"><a href="#04"><h1>04</h1></a> 
 
</div> 
 
<div style="background-color: #FFA200;"><a href="#05"><h1>05</h1></a> 
 
</div> 
 
<div style="background-color: #0042FF;"><a href="#06"><h1>06</h1></a> 
 
</div> 
 
<div style="background-color: #A01CF0;"><a href="#07"><h1>07</h1></a> 
 
</div> 
 
<div style="background-color: #0DF186;"><a href="#08"><h1>08</h1></a> 
 
</div> 
 

 

 
<div id="01" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/pekann%C3%B6t-plant-pot-rattan__2_pe286857_s4.jpg" alt="01"></a></div> 
 

 
<div id="02" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/or%C3%A4dd-plant-pot-in-outdoor-beige__0108864_pe258535_s4.jpg" alt="02"></a></div> 
 

 
<div id="03" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/socker-plant-pot-in-outdoor-galvanised__0107648_pe257427_s4.jpg" alt="03"></a></div> 
 

 
<div id="04" class="popup"><a href="#"><img src="http://www.ikea.com/us/en/images/products/huson-plant-pot__12045_PE089408_S4.JPG" alt="04"></a></div> 
 

 
<div id="05" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/ingef%C3%A4ra-plant-pot-with-saucer-outdoor-terracotta__0313254_pe513840_s4.jpg" alt="05"></a></div> 
 

 
<div id="06" class="popup"><a href="#"><img src="http://www.ikea.com/us/en/images/products/ragkorn-plant-pot__0134053_PE289885_S4.JPG" alt="06"></a></div> 
 

 
<div id="07" class="popup"><a href="#"><img src="http://www.ikea.com/gb/en/images/products/skurar-plant-pot-in-outdoor-off-white__0114580_pe267097_s4.jpg" alt="07"></a></div> 
 

 
<div id="08" class="popup"><a href="#"><img src="http://www.ikea.com/us/en/images/products/hasselnot-plant-pot__0119553_PE275934_S4.JPG" alt="08"></a></div>

감사

이미지가 페이지의 맨 아래에 진열되어 때문입니다

출처

2016-10-06 Danielillo

이 시도하는 온라인 샘플입니다 이미지, 당신은 페이지의 하단을보고 있습니다.

는, 그 페이지의 상단에 표시하여 팝업을 당신의 .popup 클래스에 top: 0;를 추가하려면 :

.popup { 
position: absolute; 
top: 0; 
padding-top:30px; 
width: 100%; 
height: 100%; 
display: none; 
text-align:center; 
bgcolor:yellow; 
z-index: 200; 
opacity:1; 
}

출처

2016-10-06 12:23:13 gaynorvader

좋아요, 감사합니다. 너무 많은 것들 :-( – Danielillo

기기에서 팝업으로 돌아 가기

답변

관련 문제