Page 1 of 1

Create a jquery pop-up window plug-in How to create pop-ups with jquery in 10 minutes Rate Topic: -----

#1 maffelu  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 38
  • View blog
  • Posts: 190
  • Joined: 21-August 08

Posted 04 July 2010 - 10:23 PM

Allrighty!

This is my first tutorial I've written here on Dream In Code, and it will be a short and fast one.
We will create a jQuery plug-in that opens a pop-up window with a header, a close button, and some room for adding text!

First of all, create a basic webpage which contains the following things:

  • A link to a jQuery file
  • A CSS section
  • A link to a custom javascript file (in this case, base.js)


This page could look like this:
<html>
	<head>
		<title>Basic Pop-Up Tutorial</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
		<style type="text/css">
		*{	margin:0; padding: 0;}
		body { background-color: #fff; }
		#wrapper { 
			margin-left: auto; 
			margin-right: auto;
			width: 780px; auto; 
			margin-top: 10px; 
			background-color: #ededed; 
			border: 2px #000 solid; 
			padding: 10px;
		}
		</style>
		<script type="text/javascript" src="base.js"></script>
	</head>
	
	<body>
		<div id="wrapper">
			<h2>Lorem Ipsum!</h2>
			<p>This is a basic lorem ipsum page, eh?</p>
		</div>
	</body>
</html>


Now, to create a plug-in for jQuery you start of by adding the signature of a plug-in in the base.js file:
(function($){
	$.popUp = function(){
	
	};
})(jQuery);


This can now be used as this:
$.popUp();


We do, however, need to add some code. We'll begin with letting the user of the plug-in add some parameters. The parameters should let the user add some header text and some body text for our pop-up! We'll also add some default parameters in case the user doesn't feel like adding anything.
$.popUp = function(userParameters){
		var defaultParameters = {
			head: 'Head Section',
			body: 'Body Section'
		}
		
		var parameters = $.extend({}, defaultParameters, userParameters);
	};


This means that if the user only enters the body parameter the head of the plug-in will say 'Head Section'.
Now we create a function for building the window. We will build the pop-up regardless of user-defined css and add all the CSS inline. This could be a section for improvement in the future.
function buildPopUp(){

}


Now, here is the code for the buildPopUp() function, I will go through it afterwards:
function buildPopUp(){
			//The Pop-Up Body Section
			var window = $(document.createElement('div')).css({'position': 'absolute',
															   'top': '50px',
															   'left': '50px',
															   'width': '360px',
															   'padding': '20px',
															   'background-color': '#999acd',
															   'border': '2px #262866 solid'})
														 .attr('id', 'myPopUp')
														 .addClass('popUp')
														 .html(parameters.body);
			
			//The Pop-Up Head Section
			var head = $(document.createElement('div')).css({'position':'absolute',
															 'width': '100%',
															 'height': '30px',
															 'background-color': '#262866',
															 'border': '2px #262866 solid',
															 'color': '#999acd',
															 'top': '-32px',
															 'left': '-2px'})
													   .attr('id', 'myPopUpHead');
			
			//THe Pop-Up Head Text Section
			var headText = $(document.createElement('span')).css({'float':'left'})
															.text(parameters.head);
			
			//The Pop-Up Head Close Button Section
			var headCloser = $(document.createElement('span')).css({'float':'right',
																	'cursor':'pointer'})
															  .text('X')
															  .click(function(){
																$(this).parents('.popUp').remove();
															  });
			
			//Append the text and the close button to the head section
			head.append(headText)
				.append(headCloser);
			
			//Append the head section to the window section
			window.append(head);
			
			//Append the window section to the 'body' section, thus adding it to the page
			$('body').append(window);											
		}


First of all, we create all sections as single variables. If we wanted to save space and improve performance and all that, this could all be done in one gigantic line of code. This is, however, not very good for a tutorial, thus the sectioning.
We start out by creating what we call the 'window' variable. I call this 'window' because it will be the main part of the pop-up. The head section will be placed inside the window for several reasons (later).
The window section has some inline css. First of all its position is absolute. This is important because we need to be able to position it wherever we want. Secondly, we position it 50px from the top and from the left. This could, and probably should, be altered since this is not the best position for a pop-up. This is a tutorial though, so I will leave quite some room for improvement.
We also add an id (myPopUp) and a class (popUp). The id in this case isn't so important. The class however, will be used the head section as a selector.
The content is added with .html instead of .text which means we give the user some room to display the content in a way he/she wants to with html formatting.

The head section is placed as an absolute div inside the window. To get it displayed on top of the body section, we set the height to 30 and the top to -30 meaning the head will 'float' right on top of the body section. Since we use borders, however, we need to compensate and add pixles accordingly (test what happens if we don't).

For the head section we create to components, headText and headCloser. The reason for not adding it directly as text into the head section is that we want the text to the left and the close button to the right. So we create to spans that floats to the left and to the right.
The closer section also gets an event bound to it. If we click on the close button, it will look up through the DOM for it's .window parent (remember we added a .window class to the 'window' component) and removes it, thus removing all descending objects.
The closer button, as well as the head section will exist within the window, so they will all go. This is how the chain of elements look in the pop-up:

window->head->headComponents

Then we add the components to the head, the head to the window and the window to the 'body' section of the page.

This will however do nothing unless we add a call to the function in the bottom of our plug-in. So now, the plug-in looks like this:
(function($){
	$.popUp = function(userParameters){
		var defaultParameters = {
			head: 'Head Section',
			body: 'Body Section'
		}
		
		var parameters = $.extend({}, defaultParameters, userParameters);
		
		function buildPopUp(){
			//The Pop-Up Body Section
			var window = $(document.createElement('div')).css({'position': 'absolute',
															   'top': '50px',
															   'left': '50px',
															   'width': '360px',
															   'padding': '20px',
															   'background-color': '#999acd',
															   'border': '2px #262866 solid'})
														 .attr('id', 'myPopUp')
														 .addClass('popUp')
														 .html(parameters.body);
			
			//The Pop-Up Head Section
			var head = $(document.createElement('div')).css({'position':'absolute',
															 'width': '100%',
															 'height': '30px',
															 'background-color': '#262866',
															 'border': '2px #262866 solid',
															 'color': '#999acd',
															 'top': '-32px',
															 'left': '-2px'})
													   .attr('id', 'myPopUpHead');
			
			//THe Pop-Up Head Text Section
			var headText = $(document.createElement('span')).css({'float':'left'})
															.text(parameters.head);
			
			//The Pop-Up Head Close Button Section
			var headCloser = $(document.createElement('span')).css({'float':'right',
																	'cursor':'pointer'})
															  .text('X')
															  .click(function(){
																$(this).parents('.popUp').remove();
															  });
			
			//Append the text and the close button to the head section
			head.append(headText)
				.append(headCloser);
			
			//Append the head section to the window section
			window.append(head);
			
			//Append the window section to the 'body' section, thus adding it to the page
			$('body').append(window);											
		}
		
		buildPopUp();
	};
})(jQuery);

$(document).ready(function(){
	$.popUp();
});


If we use it correctly, it should look something like this:

Posted Image


The pop-up plug-in could also be used like in these examples:
$(document).ready(function(){
	//Empty parameters
	$.popUp();
	
	//Only body content
	$.popUp({
		body: '<h2>My PopUp</h2><p>This is my pop-up!</p>';
	});
	
	//Using both parameters
	$.popUp({
		head: 'Welcome!',
		body: 'This is my website/page/whatever!'
	});
	
	//Using only head section
	$.popUp({
		head: 'Useless pop-up!'
	});
});


Well, hopefully this wasn't to confusing.
If you have any questions, please just leave a comment!

One thing I can mention:
I use $(document.createElement('...')) instead of $('newElement') because i've clocked it, and using createElement() was faster :bananaman:

Good luck!

Is This A Good Question/Topic? 0
  • +

Page 1 of 1