0
我有一些圖像和數據顯示爲使用Jquery工具疊加。如何關閉覆蓋圖並清除覆蓋圖中的數據？
我必須點擊兩次才能打開它。當我關閉覆蓋層並再次打開時，它會顯示第一個和第二個圖像和數據。
/**close overlay function**/
function closeNav(id) {
document.getElementById("myNav").style.height = "0%";
}
我希望當我點擊第二，第三.....時候，它只是顯示它的圖像和數據，不能顯示其他的圖像和data.How我能解決這個問題？
謝謝。
代碼：
var APIurl = "http://120.96.86.139/api/Meet_ViewPoint/GET/1";
$.get(
APIurl,
function(data) {
var i = 0;
$.each(data, function(key, value) {
console.log(key + ":" + value)
var JSONdata = JSON.stringify(data);
var NumOfJData = JSONdata.length;
$("#main").append("<div class='box' href='' id='boxmsg" + i + "' onclick='openNav(" + value.View_no + ")'> " +
"<div id='ca' class='rss-div-img' ><img width='260vw' height='280vh' " +
"href= \"" + value.View_url + value.View_img1 + "\" " +
"src= \"" + value.View_url + value.View_img1 + "\"></img>" +
"<div style='margin-top:4%;'>【" + value.View_title + "】</div>" +
"</div> </div>");
i++;
})
},
'json'
);
function openNav(id) {
var APIurl = "http://120.96.86.139/api/Meet_ViewDet/GET/" + id;
$.get(
APIurl,
function(data) {
var i = 0;
$.each(data, function(key, value) {
console.log(key + ":" + value)
var JSONdata = JSON.stringify(data);
var NumOfJData = JSONdata.length;
$("#myNav").append("<a href='javascript:void(0)' class='closebtn' id='closebtn' onclick='closeNav(" + "detinfofrom" + id + ")'>×</a>" +
"<from id='detinfofrom" + id + "'><div class='overlay-content' id='info'>" +
"<div style='max-width:80vw;max-heigh:30vh;text-align:center;'><img width='270vw' height='280vh' style='float: left' " +
"href= \"" + value.View_url + value.View_img1 + "\" " +
"src= \"" + value.View_url + value.View_img1 + "\"></img>" +
"<img width='270vw' height='280vh' style='float: left' " +
"href= \"" + value.View_url + value.View_img2 + "\" " +
"src= \"" + value.View_url + value.View_img2 + "\"></img></div>" +
"<a href='#'>" + value.View_cont + "</a></div><from>");
})
},
'json'
);
document.getElementById("myNav").style.height = "100%";
}
/**close function**/
function closeNav(id) {
document.getElementById("myNav").style.height = "0%";
}<link href='http://fonts.googleapis.com/css?family=Cutive' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
max-width: 1200px;
margin: 0 auto;
margin-top: 8%;
position: relative;
width: 100%;
}
.overlay a {
margin-top: 2%;
padding: 8px;
text-decoration: none;
font-size: 28px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay {
overflow-y: auto;
}
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="myNav" class="overlay">
</div>
<form class="login-form" method="post" id="login-form">
<!--<div class="overlay" id="myNav">-->
<div id="tab" style="margin-top:2%;">
<div id="main">
</div>
</div>
</form>