Add to top of HTML< after <body> tag – Normal
<!---------------------->
<!----- POP UP BOX ----->
<!---------------------->
<div class="popup_box1_container">
<span class="popup_box1_aligner"></span>
<div>
<div class="popup_box1_close_button">X</div>
<div id="popup_box1_content"></div>
</div>
</div>
<script>
$(window).load(function () {
$('.popup_box1_container').click(function(){
$('.popup_box1_container').hide();
});
$('.popup_box1_close_button').click(function(){
$('.popup_box1_container').hide();
});
});
function popup_box1_show() {
$('.popup_box1_container').show();
}
</script>Add to top of HTML< after <body> tag – WordPress
(Same but needs the ‘$’ changed to ‘jQuery’ or you get “TypeError: $ is not a function” console errors)
<!---------------------->
<!----- POP UP BOX ----->
<!---------------------->
<div class="popup_box1_container">
<span class="popup_box1_aligner"></span>
<div>
<div class="popup_box1_close_button">X</div>
<div id="popup_box1_content"></div>
</div>
</div>
<script>
jQuery(window).load(function () {
jQuery('.popup_box1_container').click(function(){
jQuery('.popup_box1_container').hide();
});
jQuery('.popup_box1_close_button').click(function(){
jQuery('.popup_box1_container').hide();
});
});
function popup_box1_show() {
jQuery('.popup_box1_container').show();
}
</script>Links that will trigger a popup
<a class="popup_box1_trigger" onclick="document.getElementById('popup_box1_content').innerHTML='<p>My popup<br>box</p>'; popup_box1_show();" >Show popup1</a><br>
<a class="popup_box1_trigger" onclick="document.getElementById('popup_box1_content').innerHTML='<p>My other popup</p>'; popup_box1_show();" >Show popup2</a><br>CSS
/*----------------------*/
/*----------------------*/
/*----- POP UP BOX -----*/
/*----------------------*/
/*----------------------*/
.popup_box1_container{
background:rgba(0,0,0,0.4);
cursor:pointer;
display:none;
height:100%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:10000;
}
.popup_box1_container .popup_box1_aligner{
display:inline-block;
height:100%;
vertical-align:middle;
}
.popup_box1_container > div {
background-color: #fff;
border: 2px solid #999;
border-radius: 8px;
box-shadow: 10px 10px 60px #555;
display: inline-block;
height: auto;
max-width: 551px;
min-height: 100px;
vertical-align: middle;
width: 80%;
position: relative;
padding: 15px 5%;
}
.popup_box1_close_button {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 20px;
line-height: 26px;
color: #444;
width: 30px;
height: 30px;
text-align: center;
}
.popup_box1_close_button:hover {
background-color: #ccc;
}
.popup_box1_trigger {
cursor: pointer;
font-weight: bold;
}Issues
You can’t include a single quote in your popup text, or the html code versions of it! Instead use a backslash to escape it like this: \’
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.