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

StackOverflow https://stackoverflow.com/questions/23687893

  •  23-07-2023
  •  | 
  •  

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.

Was it helpful?

Solution

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>

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top