I'；我正在寻找页面加载后出现的javascript弹出窗口，然后在几秒钟后消失_Javascript_Jquery_Html

I'；我正在寻找页面加载后出现的javascript弹出窗口，然后在几秒钟后消失

javascript jquery html

I'；我正在寻找页面加载后出现的javascript弹出窗口，然后在几秒钟后消失,javascript,jquery,html,Javascript,Jquery,Html,我知道我可以用jquery实现这一点，但我希望用纯javascript实现。问题是我不能包含任何文件链接 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="http://netdna.bootstrapc

我知道我可以用jquery实现这一点，但我希望用纯javascript实现。问题是我不能包含任何文件链接

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script language="javascript">
function popUp() {
  document.getElementById('#overlay').modal('show');

  setTimeout(function() {
      document.getElementById('#overlay').modal('hide');
  }, 5000);
});
</script>

</head>

<body onload="popUp()">
<div class="modal hide fade" id="overlay">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Leader Board</h4>
    </div>
    <div class="modal-body">
      <p><iframe src="formers" width="90%" height="90%"></iframe></p>
    </div>
</div>
</body>

在这几秒钟内，我将在内容中加载iframe

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script language="javascript">
function popUp() {
  document.getElementById('#overlay').modal('show');

  setTimeout(function() {
      document.getElementById('#overlay').modal('hide');
  }, 5000);
});
</script>

</head>

<body onload="popUp()">
<div class="modal hide fade" id="overlay">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Leader Board</h4>
    </div>
    <div class="modal-body">
      <p><iframe src="formers" width="90%" height="90%"></iframe></p>
    </div>
</div>
</body>

这是我的jquery，它的工作方式应该是。。但我需要帮助，让它的功能完全相同，只是使用js

<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

</head>

<script language="javascript">
$(document).ready( function() {
  $('#overlay').modal('show');

  setTimeout(function() {
      $('#overlay').modal('hide');
  }, 5000);
});
</script>

<div class="modal hide fade" id="overlay">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Leader Board</h4>
    </div>
    <div class="modal-body">
      <p><iframe src="formers" width="90%" height="90%"></iframe></p>
    </div>
</div>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script language="javascript">
function popUp() {
  document.getElementById('#overlay').modal('show');

  setTimeout(function() {
      document.getElementById('#overlay').modal('hide');
  }, 5000);
});
</script>

</head>

<body onload="popUp()">
<div class="modal hide fade" id="overlay">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Leader Board</h4>
    </div>
    <div class="modal-body">
      <p><iframe src="formers" width="90%" height="90%"></iframe></p>
    </div>
</div>
</body>


$（文档）.ready（函数（）{
$（'#overlay'）.modal（'show'）；
setTimeout（函数（）{
$（'#overlay'）.modal（'hide'）；
}, 5000);
});
&时代；
领导委员会

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script language="javascript">
function popUp() {
  document.getElementById('#overlay').modal('show');

  setTimeout(function() {
      document.getElementById('#overlay').modal('hide');
  }, 5000);
});
</script>

</head>

<body onload="popUp()">
<div class="modal hide fade" id="overlay">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Leader Board</h4>
    </div>
    <div class="modal-body">
      <p><iframe src="formers" width="90%" height="90%"></iframe></p>
    </div>
</div>
</body>

任何帮助都将不胜感激。谢谢。

那么您只想在加载后显示一个元素并在5秒后隐藏

<script>
window.onload=function(){
    document.getElementById('overlay').style.display = 'block';

    setTimeout(function(){
    document.getElementById('overlay').style.display = 'none';
    },5000);
};
</script>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script language="javascript">
function popUp() {
  document.getElementById('#overlay').modal('show');

  setTimeout(function() {
      document.getElementById('#overlay').modal('hide');
  }, 5000);
});
</script>

</head>

<body onload="popUp()">
<div class="modal hide fade" id="overlay">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Leader Board</h4>
    </div>
    <div class="modal-body">
      <p><iframe src="formers" width="90%" height="90%"></iframe></p>
    </div>
</div>
</body>


window.onload=function（）{
document.getElementById（'overlay'）.style.display='block'；
setTimeout（函数（）{
document.getElementById（'overlay'）.style.display='none'；
},5000);
};

这应该行得通

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script language="javascript">
function popUp() {
  document.getElementById('#overlay').modal('show');

  setTimeout(function() {
      document.getElementById('#overlay').modal('hide');
  }, 5000);
});
</script>

</head>

<body onload="popUp()">
<div class="modal hide fade" id="overlay">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Leader Board</h4>
    </div>
    <div class="modal-body">
      <p><iframe src="formers" width="90%" height="90%"></iframe></p>
    </div>
</div>
</body>


函数popUp（）{
document.getElementById（'#overlay'）.modal（'show'）；
setTimeout（函数（）{
document.getElementById（'#overlay'）.modal（'hide'）；
}, 5000);
});
&时代；
领导委员会

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script language="javascript">
function popUp() {
  document.getElementById('#overlay').modal('show');

  setTimeout(function() {
      document.getElementById('#overlay').modal('hide');
  }, 5000);
});
</script>

</head>

<body onload="popUp()">
<div class="modal hide fade" id="overlay">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Leader Board</h4>
    </div>
    <div class="modal-body">
      <p><iframe src="formers" width="90%" height="90%"></iframe></p>
    </div>
</div>
</body>

如果没有jquery和bootstrap（Esp，因为bootstrap本身需要jquery），您无法做到这一点，所以基本思想是：添加一个带有大z索引的绝对定位div，并使用setTimeout隐藏它。困难的部分是什么？我相信

modal

将是未定义的。我假设modal将是netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.jsRight的一部分，但这需要jquery，他不需要jquery。modal（）只在jquery对象上工作。在代码示例中，使用

getElementById（）

，可以得到一个节点（如果找到），它不是jQuery对象。原型

.modal（）

将不存在。是的，正是。。但是我应该把@user3594437放在哪里：最好把它放在你的问题里。但是，如果您不打算创建一个新的html页面，并将其包装在一个正文中，那么使用一个简单的div和info就可以了。