I'm trying to add an auto pop up box to the home page of a site. I have used the code from a previous answer on this site and as is follows below. The pop up works just fine but can you also add a close button/link to it? Thanks in advance for the help.

Javascript:

<script type="text/javascript">
function show_popup()
{
  document.getElementById('popup').style.display = 'block'; 
}

window.onload = show_popup;
</script>

The CSS:

#popup
{
position:absolute;
z-index:99;
display:block;
top:200px;
left:50%;
width:567px;
height:420px; 
margin-left:-250px; 
}

and the call:

<div id="popup">pop up window</div>

I'm trying to add an auto pop up box to the home page of a site. I have used the code from a previous answer on this site and as is follows below. The pop up works just fine but can you also add a close button/link to it? Thanks in advance for the help.

Javascript:

<script type="text/javascript">
function show_popup()
{
  document.getElementById('popup').style.display = 'block'; 
}

window.onload = show_popup;
</script>

The CSS:

#popup
{
position:absolute;
z-index:99;
display:block;
top:200px;
left:50%;
width:567px;
height:420px; 
margin-left:-250px; 
}

and the call:

<div id="popup">pop up window</div>

• javascript
• jquery
• css

Share Improve this question Follow asked Oct 1, 2013 at 23:46 b-oneb-one 111 gold badge11 silver badge11 bronze badge

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

<script type='text/javascript' src='http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js'></script>‌    
<div id="popup">
<div id='popup-close'>Close</div>
pop up window
</div>

And your jQuery,

$(document).ready(function()
{
    $('#popup').show('fast'); // This will show the Pop Up in the Page Load
    $('#popup-close').click(function(e) // You are clicking the close button
    {
      $('#popup').hide('fast'); // Now the pop up is hided.
    });
});

Add another div into the popup that when clicked activates this document.getElementById('popup').style.display = 'none';. You can relatively position the div to the top, right simple enough.

Here's a simple way using a 2nd positioned absolute div within your popup div.

Lot's of ways to improve on it and add more stuff.

function show_popup() {
  document.getElementById('popup').style.display = 'block'; 
}
window.onload = show_popup;
$('.popup-closer').click(function() {
	$('#popup').hide();
});

#popup {
  position: absolute;
  z-index: 99;
  display: block;
  top: 50%; left: 50%; /* if you want to center it do this.. */
  transform: translate(-50%, -50%); /* ..and this */
  width:150px;
  height:225px; 
  color: white;
  background-color: black;
}
.popup-closer {
  position:absolute;
  top: 5px;
  right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  border-radius: 20px;
  padding: 5px;
  cursor: pointer;
}
.popup-closer:hover {
  background-color: white;
}




html, body {
  margin: 0; padding: 0;
}

<link href="https://netdna.bootstrapcdn./font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="popup">
  pop up window
  <div class="popup-closer"><i class="fa fa-close"></i></div>
</div>

If you want it only shown once per user per session or day look into session and local storage. The popup can first check their session storage if they've been served the notice already this session/this day/etc and if so prevent them being shown a 2nd+ time. Same deal if you have the code sitewide and you don't want it popping up every page load.

Also, may want to make #popup position: fixed; so when user scrolls page the popup stays with them until they acknowledge and close it.

fiddle

https://jsfiddle/Hastig/au3xm1oy/

and additional fiddle for more ideas

https://jsfiddle/Hastig/au3xm1oy/2/