라이트 박스의 종료 또는 뒤로 가기 버튼

네 개의 미리보기 이미지가 있으며 축소판 이미지 중 하나를 선택하면 이미지가 상자로 확대됩니다. 하지만 그 "상자"에서 벗어나거나 다시 돌아가는 데 문제가 있습니다. 그냥 네 개의 미리보기 이미지와 나는 X 또는 exit 버튼과 같은 것을 가지고 싶어서 다시 돌아가거나 상자를 없앨 수 있습니다. 내가 시도한 모든 코드는 작동하지 않습니다. 이것이 정말 미안합니다. 바보 같은 질문!라이트 박스의 종료 또는 뒤로 가기 버튼

<!DOCTYPEhtml> 
<html> 
<head> 
<title> Light Box</title> 
<h1> My Page </h1> 

<link rel="stylesheet" type="text/css" href="style1.css"> 
<script type="text/javascript"> 

function lightBox(imgNumber){ 
    var img = document.getElementById('changeImg'); 
    img.src = imgNumber; 

    document.getElementById('BG').style.display = "block"; 
    document.getElementById('FG').style.display = "block"; 

} 

</script> 
<body> 

<div id="BG" onClick="Box():"> 

</div> 


<div id="FG"> 
    <img src="pic1.jpg" id="changeImg"> 
</div> 


<div id="thumb"> 
    <img alt="Caption 1" src="pic1thumbnail.jpg" onClick="lightBox('pic1.jpg');" class="sty"> 
    <img alt="Caption 2" src="pic2thumbnail.jpg" onClick="lightBox('pic2.jpg');" class="sty"> 
    <img alt="Caption 3" src="pic3thumbnail.jpg" onClick="lightBox('pic3.jpg');" class="sty"> 
    <img alt="Caption 4" src="pic4thumbnail.jpg" onClick="lightBox('pic4.jpg');" class="sty"> 

</div> 



</body> 
</html>

이 내 코드^

이며,이 내 스타일

body{ 
background-color: white; 
margin: 0; 
padding: 0; 
} 



p { 
margin-left: 40px; 
margin-right: 100px; 
} 

#thumb{ 
margin-left: 40px; 
margin-top: 40px; 
margin-bottom: 40px; 
color: black; 
} 

.sty { 
padding-right: 10px; 
} 

#FG{ 
display: none; 
border: 1px solid white; 
background-color: white; 
height: 350px; 
width: 400px; 
margin-left: -280px; 
margin-top: -200px; 
left: 50%; 
top: 50%; 
position: fixed; 
padding: 10px; 
} 

#BG { 
width: 100%; 
height: 3000px; 
background-color: black; 
position: fixed; 
opacity: 0.8; 
-moz-opacity:0.8; 
-webkit-opacity:0.8; 
display: none; 
cursor: pointer; 
margin-top: -200px; 
}

출처

2014-11-25 Deborah French

내가 조금 코드를 변경합니다. 이거해볼 수 있니?

http://jsfiddle.net/k2a3t18z/

function closeLightBox(){ 

    document.getElementById('BG').style.display = "none"; 
    document.getElementById('FG').style.display = "none"; 

}

<div id="FG"> 
    <div id="xbutton" class="xbutton" onclick="closeLightBox();">XXX</div> <br/> 
    <img src="pic1.jpg" id="changeImg"/> 
</div>

.xbutton{ 
    color: #000; 
    display: inline-block; 
    width: 100%; 
    text-align: right; 
}

출처

2014-11-25 15:12:17 caslaner

오 완벽한 감사 :) 일이 –

라이트 박스의 종료 또는 뒤로 가기 버튼

답변

관련 문제