Question

大家好我试图让页面加载时弹出窗口淡入淡出。我使用jquery，但它不会在短时间内消失，就像它应该的那样。当页面由于某种原因加载时它已经存在了。有人可以解释一下我做错了什么？感谢

$(function() {
          $('#modal').css('display','block');
      $('.modal-bg').fadeIn(1000);
});

    $('#close').click(function(){
          $('.modal-bg').fadeOut();
          $('#modal').fadeOut();
      return false;
    });

HTML

      <!DOCTYPE html>
<html>
  <head>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <span class="button">Sign In</span>
<div class="modal-bg">
  <div id="modal">
    <span>Sign In<a href="#close" id="close">&#215;</a></span>
    <form>
      <input id="username" name="username" type="textbox" placeholder="Username" required>
      <input id="password" name="password" type="password" placeholder="Password" required>
      <a id="forgot-link" href="#">Forgot password?</a>
      <button name="submit" id="submit" type="submit">Sign in</button>
    </form>
  </div>
</div>

Answer 1

默认情况下将模态设置为隐藏：

<div class="modal-bg" style="display: none">
    ...
</div>

Answer 2

试试这个：

$(window).load(function(){
     $('#modal').css('display','block');
      $('.modal-bg').fadeIn(1000);
});

$('#close').click(function(){
      $('.modal-bg').fadeOut();
      $('#modal').fadeOut();
});

$（window）.load的作用是在运行函数之前等待下载所有内容。

同时确保模态默认隐藏在CSS中。

希望它有所帮助！

jquery弹出窗口不会在页面加载时淡入

2 个答案: