What is a pop-up?
Well, whatIs.com defines it as a pretty stupid question, but if you don't know what a pop-up is, go here for a definition.
Pop-ups are well known in desktop applications. They can be useful to ask for additional information of just to give the user some information or choices. When it comes to javascript a lot of people feel handicapped by the fact that the 'alert' box is so awful. And it is. Using CSS we have for a while been able to create custom pop-ups and in combination with javascript they have been found useful when it comes to informing the user of something, or displaying some terrible advertisement.
Using jQuery it is quite simple to create a pop-up. Actually, all that is needed is some basic skill in CSS.
Our first pop-up
Our first pop-up will be very simple. If will have a header and some contents, nothing more. We will add stuff to it as we go along.
As I said, the CSS plays a very important part in making a pop-up. We are using three classes, cAlert, cAlertHeader and cAlertContent (c standing for custom). These three class looks like this:
.cAlert{
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: auto;
background-color: #dcdcdc;
border-left: 1px #8a8a8a solid;
border-top: 1px #8a8a8a solid;
border-right: 1px #a6a6a6 solid;
border-bottom: 1px #a6a6a6 solid;
}
.cAlertHeader{
margin: 0;
padding: 3px;
border-bottom: 1px #8a8a8a solid;
background-color: #333333;
color: #fff;
font-weight: bold;
}
.cAlertContent{
background-color: #f9f9f9;
margin-top: 25px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
border-left: 1px #bcbcbc solid;
border-top: 1px #bcbcbc solid;
border-right: 1px #fff solid;
border-bottom: 1px #fff solid;
}
The reason for all that CSS is that i didn't want to make a stupid tutorial with a too ugly result. It won't be pretty, but it will be ok.
The css way to do this is to create an empty div using the custom alert class and hide it using display: none and later on change it to display: block or something.
Using jQuery we will make this a lot more logical and actually create the alert div when we need it and remove it when we don't need it. That way we won't clutter the DOM and we will have a more logical flow.
The first basic pop-up will look like this:
<html>
<head>
<style type="text/css">
.cAlert{
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: auto;
background-color: #dcdcdc;
border-left: 1px #8a8a8a solid;
border-top: 1px #8a8a8a solid;
border-right: 1px #a6a6a6 solid;
border-bottom: 1px #a6a6a6 solid;
}
.cAlertHeader{
margin: 0;
padding: 3px;
border-bottom: 1px #8a8a8a solid;
background-color: #333333;
color: #fff;
font-weight: bold;
}
.cAlertContent{
background-color: #f9f9f9;
margin-top: 25px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
border-left: 1px #bcbcbc solid;
border-top: 1px #bcbcbc solid;
border-right: 1px #fff solid;
border-bottom: 1px #fff solid;
}
</style>
<!--Load the jquery lib -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<!--Use jquery -->
<script type="text/javascript">
$(document).ready(function(){
$('#myLink').click(function(){
var header = $('<div />').addClass('cAlertHeader')
.text('Alert box!');
var content = $('<div />').addClass('cAlertContent')
.text('This box contains an alert message for the user!');
$('<div />').attr('id', 'myAlertBox')
.addClass('cAlert')
.append(header)
.append(content)
.appendTo('body');
});
});
</script>
</head>
<body>
<a href="#" id="myLink">Show alert!</a>
</body>
</html>
What we do here is quite simple. We have three divs that together build the alert box:
.cAlert:
The alert box container. This is the box itself which can contain whatever you want.
.cAlertHeader:
The alert box header. This will show a header message to the use. Could perhaps display what kind of message the box contains (error, info, etc.).
.cAlertContent:
The alert box content. This contains the actual message to the user/visitor.
We start by building a header and content object. After that we create the alert box (cAlert) and append the header and the content to the box.
The end result looks like this (screenshot):
View example here.
Using position: absolute and mouse coordinates
We'll make our alert box a bit more spectacular by making it appear right on top of the mouse no matter where it is clicked. We'll also add a close link so that the user can close the alert box.
To get the mouse coordinates we use the 'event' object that is always passed to a an event, even if you don't accept it.
Example:
<script type="text/javascript">
function $('a').click(function(){
//Whatever...
});
function $('a').click(function(e){
//Whatever, but with an e object and all its props and meths
});
</script>
The event object is always available in these events and could be helpful. It will be very useful in capturing where the mouse was located when the event was triggered.
The second thing we will use is the position css property. Setting this to absolute we can decide where on the screen we will place the div. In combination with the z-index that let's use work in different layers we can place the alert box on top of the rest of the page.
The position: absolute property makes the top and left css properties useful since we can tell the div how far from the top and how far from the left it should appear.
This is the code for an alert box that pops up on top of the mouse, instead of statically 10 from the top and 10 from the left (notice the difference in the .cAlert css class):
<html>
<head>
<style type="text/css">
.cAlert{
position: absolute;
/*top: 10px;*/
/*left: 10px;*/
z-index: 2;
width: 200px;
height: auto;
background-color: #dcdcdc;
border-left: 1px #8a8a8a solid;
border-top: 1px #8a8a8a solid;
border-right: 1px #a6a6a6 solid;
border-bottom: 1px #a6a6a6 solid;
}
.cAlertHeader{
margin: 0;
padding: 3px;
border-bottom: 1px #8a8a8a solid;
background-color: #333333;
color: #fff;
font-weight: bold;
}
.cAlertContent{
background-color: #f9f9f9;
margin-top: 25px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
border-left: 1px #bcbcbc solid;
border-top: 1px #bcbcbc solid;
border-right: 1px #fff solid;
border-bottom: 1px #fff solid;
}
</style>
<!--Load the jquery lib -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<!--Use jquery -->
<script type="text/javascript">
$(document).ready(function(){
$('#myLink').click(function(e){
var mouseFromLeft = e.pageX;
var mouseFromTop = e.pageY;
var header = $('<div />').addClass('cAlertHeader')
.text('Alert box!');
var content = $('<div />').addClass('cAlertContent')
.text('This box contains an alert message for the user!');
content.append($('<a />').attr({'href':'#', 'id':'closeLink'})
.html('<br /><br />close'));
$('<div />').attr('id', 'myAlertBox')
.addClass('cAlert')
.css({'top':mouseFromTop, 'left':mouseFromLeft})
.append(header)
.append(content)
.appendTo('body');
});
$('#closeLink').live('click', function(){
$('#myAlertBox').remove();
});
});
</script>
</head>
<body>
<a href="#" id="myLink">Show alert!</a>
</body>
</html>
View example here.
We will try one more thing. Instead of using it as a straight-forward pop-up, we will use it as a info pop-up when hovering links. We will have a text that describes a couple of web pages. When hovering the links we will show our pop-ups containing information about these web pages.
Ideally this would be accomplished using AJAX, but since this article is not about AJAX, we will do it with hard-coded values. This can of course easily be changed to support AJAX instead.
So, the changes we make are as follows:
- We change from click to hover
- We add some effects by letting the pop-up fade in
One change in the CSS is to the .cAlert class where we add display:none so that it is possible to fade the alert box in.
This code contains the last changes:
<html>
<head>
<style type="text/css">
.cAlert{
position: absolute;
/*top: 10px;*/
/*left: 10px;*/
z-index: 2;
width: 200px;
height: auto;
background-color: #dcdcdc;
border-left: 1px #8a8a8a solid;
border-top: 1px #8a8a8a solid;
border-right: 1px #a6a6a6 solid;
border-bottom: 1px #a6a6a6 solid;
display: none;
}
.cAlertHeader{
margin: 0;
padding: 3px;
border-bottom: 1px #8a8a8a solid;
background-color: #333333;
color: #fff;
font-weight: bold;
}
.cAlertContent{
background-color: #f9f9f9;
margin-top: 25px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
border-left: 1px #bcbcbc solid;
border-top: 1px #bcbcbc solid;
border-right: 1px #fff solid;
border-bottom: 1px #fff solid;
}
</style>
<!--Load the jquery lib -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<!--Use jquery -->
<script type="text/javascript">
$(document).ready(function(){
$('.alertLink').hover(function(e){
var mouseFromLeft = e.pageX;
var mouseFromTop = e.pageY;
var content = new Object();
if($(this).text() == 'google.com'){
content.link = '<a href="http://www.google.com">http://www.google.com</a>';
content.type = "Search engine";
content.founder = "Larry Page and Sergey Brin";
}
else if($(this).text() == 'jquery.com'){
content.link = '<a href="http://www.jquery.com">http://www.jquery.com</a>';
content.type = 'Javascript library';
content.founder = 'John Resig';
}
else if($(this).text() == 'morkalork.com'){
content.link = '<a href="http://www.MorkaLork.com">http://www.MorkaLork.com</a>';
content.type = 'Programming tutorials';
content.founder = 'Magnus Ferm';
}
var header = $('<div />').addClass('cAlertHeader')
.text('Alert box!');
var content = $('<div />').addClass('cAlertContent')
.html("<p>Link: " + content.link + "</p><p>Type: " + content.type + "</p><p>Founder: " + content.founder + "</p>");
$('<div />').attr('id', 'myAlertBox')
.addClass('cAlert')
.css({'top':mouseFromTop, 'left':mouseFromLeft})
.append(header)
.append(content)
.appendTo('body');
$('#myAlertBox').fadeIn('slow');
}, function(){
$('#myAlertBox').remove();
});
});
</script>
</head>
<body>
<p>There are a lot of pages on the internet, <a href="#" class="alertLink">google.com</a> is one of them, <a href="#" class="alertLink">jquery.com</a> is another one!</p>
<p>If you don't have time to visit them all, make sure you don't miss <a href="#" class="alertLink">morkalork.com</a>!</p>
</body>
</html>
View example here.
Using the .fade() function we create a nice fade in effect while removing the alert box when moving outside the link.
This is just an example of how to make an(ugly) alert box, experiment and try it out for yourself!
There are no comments on this article.
Leave a message!
If you have any question or just want to leave a message, just fill out the form below!
Your e-mail will not be visible in your post, it is for validation reasons only