I'm looking for a javascript popup that happens after the page loads and than disapears after a few seconds

Question

I know i can accomplish this with jquery but I'd like to do it in pure javascript. The problem is I can't include any file links.

I'll have an iframe loading in the content for those few seconds.

Here's my jquery and it works like it should.. but i need help with getting it to function the exact same just using 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>

Any help would be greatly appreciated. Thank you.

You can't do this without jquery and bootstrap (Esp, since bootstrap itself requires jquery) — Yang, May 15 '14 at 20:26
So basic idea is: Add an absolute positioned div with a big z index and hide it with a setTimeout. What is the hard part? — epascarello, May 15 '14 at 20:32

score 2 · Accepted Answer · answered May 15 '14 at 20:28

2

So you just want to show an element onload and hide after 5 seconds?

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

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

answered May 15 '14 at 20:28

yes exactly.. but where would i stick the – user3594437 May 15 '14 at 20:40
@user3594437 : it's best to put that in your question. But if you don't aim for a new html page, wrapped in a body, a simple div with info is fine. – KarelG May 15 '14 at 20:46

score -1 · Answer 2 · answered May 15 '14 at 20:31

This should work

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

I assumed that modal would be part of netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js — XD face me, May 15 '14 at 20:34
Right, but that requires jquery, and he wants to do it without. — Kevin B, May 15 '14 at 20:35
`.modal()` works only on jQuery objects. In your code example, using `getElementById()`, you get a node (if found), which is **not** a jQuery object. The prototype `.modal()` won't exist then. — KarelG, May 15 '14 at 20:38

I'm looking for a javascript popup that happens after the page loads and than disapears after a few seconds

2 Answers2