One thing I’ve found very useful recently is the “dimmer box” or “faded pop-up”. This web tool allows you to quickly focus the attention of the visitor onto your message, and demands a response from them.
If you’re looking for something stylish and effective, you’ve come to the right place. Every once in a while I have to take a break from what I’m doing to try something simple that I’ve never done before. This pop-up page dimmer was the perfect quick little project. I will show you how to build it.
This dimming effect is done VERY easily by using JQUERY. If you’ve ever built an HTML page, it will take you less than 20 seconds to get this working for you. Plus, this pop-up box cannot be blocked with pop-up blockers and is easily customizable through CSS.
The page you are viewing right now is set to trigger a pop-up on a 10 second delay. Plus you can also trigger the effect by clicking the button below. Click on the red “close” button or anywhere outside the popup box to hide the pop-up.
All the code I used for this project is listed below. Please give it a try and let me know what you think.
This is a sample POP-UP Page Dimmer.
Anything can go here!
This is the Javascript to use in the <head> section of your page.
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript”>
//This is the function that closes the pop-up
function endBlackout(){
$(“.blackout”).css(“display”, “none”);
$(“.msgbox”).css(“display”, “none”);
}//This is the function that closes the pop-up
function strtBlackout(){
$(“.msgbox”).css(“display”, “block”);
$(“.blackout”).css(“display”, “block”);
}//Sets the buttons to trigger the blackout on clicks
$(document).ready(function(){
$(“#btn1″).click(strtBlackout); // open if btn is pressed
$(“.blackout”).click(endBlackout); // close if click outside of popup
$(“.closeBox”).click(endBlackout); // close if close btn clicked// Automatically trigger the pop-up after 10 seconds
setTimeout( strtBlackout, 10000);
});
/**
* @author Rob Goodwin / About Web Design
* http://www.aboutwd.com
*
* Version 1
* Copyright (c) 2012 About Web Design
**/
</script>
This is the CSS to make it work. (Also goes in the <head> section
<style type=”text/css”>
.blackout {
background-color:#000;
opacity:.7;
filter:alpha(opacity=70);
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:100;
display:none;
cursor:pointer;
}
.msgbox {
background-color:#ccc;
border:1px solid #ccc;
color:#000;
width:70%;
height:60%;
position:fixed;
top:20%;
left:15%;
border-radius:20px;
padding:10px;
z-index:101;
display:none;
}
.closeBox {
background-color:#CC0000;
color:#FFFFFF;
padding:8px;
float:right;
border-radius:3px;
cursor:pointer;
text-transform:uppercase;}
</style>
This is the Content for the dimmer: This goes in the <body> section
<div class=”blackout”></div>
<div class=”msgbox”><div class=”closeBox”>Close</div>
Your Message Goes Here! </div>
<input type=”button” id=”btn1″ value=”Click Here” />
sending...