div彈出不顯示/消失問題

我正在寫一小段代碼，如下所示。我的問題是，儘管有兩個div（overlay_connect_error和overlay_connect_success）是相同的，其中之一：overlay_connect_error，無法正確顯示。基本上這個div在一秒內出現並消失，而另一個顯示正常，它保持在那裏，直到我點擊關閉鏈接。 ajax調用正在工作並返回數據正常。我無法弄清楚錯誤在哪裏。任何建議都會有很大的幫助。div彈出不顯示/消失問題

這裏是我的代碼：

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

來源

2016-06-07 Bishwaroop Chakraborty

'濾波器：α（不透明度= 50）;'將不起作用。（並且你不需要'