div弹出窗口未显示/淡出问题

我正在编写一小段代码，如下所示。我的问题是，尽管两个div（overlay_connect_error和overlay_connect_success）相同，但其中一个：overlay_connect_error，无法正确显示。基本上，这个div在一秒钟内出现并消失，而另一个显示正常，它一直留在那里，直到我单击关闭链接。ajax 调用正在工作并正常返回数据。我仍然无法弄清楚错误在哪里。任何建议都会有很大帮助。

这是我的代码：

<head>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">    
    $(document).ready(function(){
        $(".connectUser").click(function(){
           var loggedInUser = '<?php echo $user_id;?>';
           var otherUser = '<?php echo $otherUser_id;?>';
           var info = 'loggedInUser='+loggedInUser+'&otherUser='+otherUser;
                $.ajax({
                    type: "POST",
                    url: "connect.php",
                    data: info,
                    success:function(data){
                        if(data.data=='success'){
                            $('#overlay_connect, #overlay-back').fadeOut(100);
                      $('#overlay_connect_success, #overlay-back-connect').fadeIn(500);
                    }else if(data.data=='error'){
                        $('#overlay_connect, #overlay-back').fadeOut(100);
                      $('#overlay_connect_error, #overlay-back-connect').fadeIn(500);
                    }   
                    }
                });
            });
        });
</script>

<style type="text/css">
html, body {
    width  : 100%;
    height : 100%;
}
#overlay-back {
    position   : fixed;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : #1C1C1C;
    opacity    : 1.2;
    filter     : alpha(opacity=60);
    z-index    : 10;
    display    : none;
}    
#overlay-back-connect {
    position   : fixed;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : #1C1C1C;
    opacity    : 1.2;
    filter     : alpha(opacity=60);
    z-index    : 10;
    display    : none;
}      
#overlay_connect {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 10;
    display  : none;
} 

#overlay_connect_error {
   position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 10;
    display  : none;
    color: white;
    font-family: arial;
}   
#overlay_connect_success {
   position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 10;
    display  : none;
    color: white;
    font-family: arial;
}  

</style>

<script type="text/javascript">
      function pop(div) {
        document.getElementById(div).style.display = 'block';
      }
      function hide(div) {
        document.getElementById(div).style.display = 'none';
      }
</script>

<style>
      .ontop {
        z-index: 999;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        position: absolute;       
        background-color: #cccccc;
        color: #aaaaaa;
        opacity: 1.9;
        filter: alpha(opacity = 50);
      }
      #popup {
        width: 300px;
        height: 200px;
        position: absolute;
        color: #000000;
        background-color: #ffffff;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -150px;
      }
 </style>
 <script type="text/javascript">
    $(document).ready(function(){
        $('.connect').on('click', function () {
    $('#overlay_connect, #overlay-back').fadeIn(500);
});
    });
</script>
</head>
<body>
<div id="overlay-back"></div>
        <div align="center" style="position: relative; font-size: 15px; text-align: center; top: 80px;" id="overlay_connect">
          <span>
          <button id = "connectUser" class="connectUser" href="#" style="position: relative; top: 100px; align:center; color:white;">Connect with this person</button>
          <a href="home.php" style="position: relative; color:white; float: center;" onClick="hide('overlay-back')">Close</a>
          </span>
    </div> 
    <div id="overlay-back-connect"></div>
        <div align="center" style="position: relative; font-size: 15px; text-align: center; top: 50px;" id="overlay_connect_error">
          <span>
               <h3 style="position: relative; align:center; color:white;"> You are already connected with this person!! </h3><br/><p/>
              <a style="position: relative; align:center; color:white;" href="home.php">Close</a>
          </span>
    </div> 

     <div id="overlay-back-connect"></div>
        <div align="center" style="position: relative; font-size: 15px; text-align: center; top: 50px;" id="overlay_connect_success">
          <span>
               <h3 style="position: relative; align:center; color:white;"> You are now connected with this person!! </h3><br/><p/>
              <a style="position: relative; align:center; color:white;" href="home.php">Close</a>
          </span>
    </div>

<div>
    <a class="connect" id="connect" href="#">Connect</a>
</div>

<div>
    <a id="view_connections" href="connections.php">View Connections</a>
</div>
</body>

第一个问题我看到你有两个元素

id='overlay-back-connect'

164 和 173 行

尝试从第 20 行和第 24 行的淡入选项中删除它们

如果要在另一个项目上方添加某些内容，如果不从样式中删除 Z 值，也可以更改 Z 值。

将两个样式块合并为一个，因为无需拆分它们，并将脚本向下移动到页面末尾，因为它需要在元素加载后运行

您的问题是由于 2 个 html 元素具有与提到的相同 id 而出现的阿恩库多维奇

当您尝试使用以下代码淡入时，代码行为异常。$（'#overlay_connect_error， #overlay-back-connect'）.fadeIn（500）;

在下面检查这个 plunker。我做了一些更改以使其在 plunker 上运行，并在 plunker 文件结构中移动了您的代码。

https://plnkr.co/edit/AHUTLgFssxjJjDvUdcYT?p=preview

 <div id="overlay-back-connect-2"></div>

 <div id="overlay-back-connect-1"></div>

相关内容

最新更新

热门标签：