javascript - 为什么我弹出框每次要刷新后点击才能出来？-PHP中文网问答

搜索

微信公众号

首页文章专题 AI工具学习编程手册下载最近更新

文章 web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具 AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载 js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

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

PHP中文网 2017-04-10 16:31:23

[JavaScript讨论组]

806

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

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

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

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

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

PHP中文网

认证0级讲师

全部回复(3)

阿神2017-04-10 16:33:23 3楼

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

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);
            });

            $('#closep').click(function(){
                down();
            });
            var p=document.querySelector("#popupp");
            var timer=null;
            function moveUp() {
                var aa = document.defaultView.getComputedStyle(p, null);
                var bottom = parseInt(aa.bottom);
                if (bottom != 0) {
                    bottom = bottom + 10;
                    p.style.bottom = bottom + "px";
                } else {
                    clearInterval(timer);
                    timer = null;
                }
            }
            function moveDown(){
                var aa=document.defaultView.getComputedStyle(p,null);
                var bottom=parseInt(aa.bottom);
                //aa.height 获取的数据是带有px字符的，例如150px，所以要通过parseInt转成int
                if(bottom!=-(parseInt(aa.height))){
                    bottom=bottom-10;
                    p.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 p</button>
<p id="popupp" style="width:200px; height:150px; border:1px solid red;bottom:-150px;position:fixed;right:10px;">
    <button>按钮</button><button id="closep" >关闭</button>
</p>

</body>
</html>

赞 +0

添加回复

巴扎黑2017-04-10 16:33:23 2楼

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

赞 +0

添加回复

PHP中文网2017-04-10 16:33:23 1楼

我猜是这样的：

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

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

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

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

$('#dd').on('click',function(){ 。。。。})

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>