Question

我正在编写一小段代码，如下所示。我的问题是，尽管两个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>

Answer 1

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

id='overlay-back-connect'

第164和173行

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

如果你想在你的风格中删除z值，如果你想要一些高于另一个项目的东西，也可以改变z值。

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

Answer 2

你的问题出现是因为2个html元素具有相同的id AAnkudovich

当您尝试淡入使用以下代码时，代码行为不正常。 $（＆＃39; #overlay_connect_error，＃overlay-back-connect ＆＃39;）。fadeIn（500）;

检查下面的plunker。我做了一些更改，使其适用于plunker并将您的代码移动到plunker文件结构中。

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


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

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

2 个答案: