CODEWITHSUNDEEP
javascriptjquerycss
b-one
b-one

Reputation: 1

Adding close button to auto pop up window

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>

Upvotes: 0

Views: 17385

Answers (3)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

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.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/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.net/Hastig/au3xm1oy/

and additional fiddle for more ideas

https://jsfiddle.net/Hastig/au3xm1oy/2/

Upvotes: 0

Sarvap Praharanayuthan
Sarvap Praharanayuthan

Reputation: 4360

<script type='text/javascript' src='http://ajax.googleapis.com/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.
    });
});

Upvotes: 1

Thomas Wood
Thomas Wood

Reputation: 819

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.

Upvotes: 0

Related Questions