一個退出或返回按鈕燈箱

我有四個縮略圖，當您選擇其中一個縮略圖時，圖片放大到一個框但我有一個退出該「框」或回去的問題只是四個縮略圖，我想有一個像X或退出按鈕，所以你可以回去或擺脫框，我已經嘗試過的所有代碼是行不通的，我是新來的這很抱歉，如果這是一個愚蠢的問題！一個退出或返回按鈕燈箱

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

哦完美的感謝奏效:) – 2014-11-25 16:16:36

一個退出或返回按鈕燈箱

回答

相關問題