如何关闭叠加层并清除叠加层中的数据？

时间：2017-03-01 01:13:36

标签： javascript jquery html

我使用Jquery Tools将一些图像和数据显示为叠加层。

我必须点击两次才能打开它。当我关闭叠加层并再次打开它时，它会显示第一个和第二个图像和数据。

  /**close overlay function**/ 

  function closeNav(id) {

    document.getElementById("myNav").style.height = "0%";

}

我希望当我点击第二，第三.....时间时，它只显示图像和数据，无法显示其他图像和数据。如何解决这个问题？

感谢。

代码：

 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 + ")'>&times;</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>

1 个答案:

答案 0 :(得分：1)

innerHTML = ''或$.empty()将清空该元素。

function closeNav(id) {

  var myNav = document.getElementById("myNav");

  myNav.style.height = "0%";
  myNav.innerHTML = '';

}

＆＃13;
＆＃13; 
.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;
  }
}
＆＃13; 
<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>
<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>

<script>
  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 + ")'>&times;</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) {
      
        var myNav = document.getElementById("myNav");

        myNav.style.height = "0%";
        myNav.innerHTML = '';

      }
</script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题