问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
xjweb
    35696069

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

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

    javascriptjquery
    阅读 4k
    3 个回答
    得票最新
    头像
    kikong
      19.1k31320

      你点击 关闭 按钮 不是隐藏了你的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>
      头像
      getAnswer
        31916

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

        头像
        quanta
          461716

          我猜是这样的：

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

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

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

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

          $('#dd').on('click',function(){ 。。。。})
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题