首页 > 为什么我弹出框每次要刷新后点击才能出来?

为什么我弹出框每次要刷新后点击才能出来?

<div style="width:200px; height:150px; border:1px solid red;bottom:-150px:position:fixed;right:10px;">

<button id="dd">按钮</button><button onclick="down()">关闭</button>

</div>
<script>
$('#dd').click(function(){

                                
             timer=setInterval(moveUp,100);
            
        });

    var div=document.querySelector("#dd");
    var timer=null;
    function moveUp(){                       
         var aa=
      document.defaultView.getComputedStyle(div,null);
      var bottom=parseInt(aa.bottom);
      if(bottom!=0){
         bottom=bottom+10;
         div.style.bottom=bottom+"px";}else{
           clearInterval(timer);
           timer=null;
         
         }
                      
 function moveDown(){               
        var aa=
      document.defaultView.getComputedStyle(div,null);
      var bottom=parseInt(aa.bottom);  
          if(bottom!=-($('#alertM').height())){
           bottom=bottom-10;
           div.style.bottom=bottom+"px";}else{

           clearInterval(timer);
           timer=null;
         
         } 
                                  
          }
      function down(){         //onclick 事件函数
          if(timer==null){
           timer=setInterval(moveDown,100);
            
          }                       
        }   
    }</script>

为什么我弹出框每次要刷新后点击才能出来,关闭后连续点击不会弹出来,需要刷新页面在点击


建议上完整一点的代码,这样也能更快的解决问题


你点击 关闭 按钮 不是隐藏了你的div了吗?
div在页面上看不到了,你还要怎样~~~

if(bottom!=-($('#alertM').height())){
此处有误
获取的数据是带有px字符的,例如150px,所以要通过parseInt转成int

===下面是修改过后代样例代码===

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>
        $(function(){
            $('#dd').click(function(){
                timer=setInterval(moveUp,100);
            });

            $('#closeDiv').click(function(){
                down();
            });
            var div=document.querySelector("#popupDiv");
            var timer=null;
            function moveUp() {
                var aa = document.defaultView.getComputedStyle(div, null);
                var bottom = parseInt(aa.bottom);
                if (bottom != 0) {
                    bottom = bottom + 10;
                    div.style.bottom = bottom + "px";
                } else {
                    clearInterval(timer);
                    timer = null;
                }
            }
            function moveDown(){
                var aa=document.defaultView.getComputedStyle(div,null);
                var bottom=parseInt(aa.bottom);
                //aa.height 获取的数据是带有px字符的,例如150px,所以要通过parseInt转成int
                if(bottom!=-(parseInt(aa.height))){
                    bottom=bottom-10;
                    div.style.bottom=bottom+"px";
                }else{
                    clearInterval(timer);
                    timer=null;
                }
            }

            function down(){         //onclick 事件函数
                if(timer==null){
                    timer=setInterval(moveDown,100);
                }
            }

        });

    </script>
</head>
<body>
<button id="dd">show Div</button>
<div id="popupDiv" style="width:200px; height:150px; border:1px solid red;bottom:-150px;position:fixed;right:10px;">
    <button>按钮</button><button id="closeDiv" >关闭</button>
</div>

</body>
</html>

我猜是这样的:

如果你弹出框的button id是dd,
但是你在代码里写的是

$('#dd').click(function(){})

这个是触发点击事件,所以每一次你刷新页面,都相当于定义了一下点击button后的操作。

所以你应该是监听这个click事件

$('#dd').on('click',function(){ 。。。。})
【热门文章】
【热门文章】