RedVulpine – Blog

Popups without popups

June 9th, 2011. Published under Javscript. 1 Comment.

Some days ago, a friend asked me if i knew any script that open a “modal popup” to make a sort of hotsite inside online store.

I don’t use this kind of script all the time, so, the solution for him was google. And was there that the problem happened. Lot’s of results, but, all of them more than outdated.

Then he talk to me asking if i can’t make something to help him. Well, I’ve created a quick script for him since he uses jQuery on his application, and now, looking forward his problem, i was thinking about the usability of this kind of code, then I’ve decided to create a jQuery Plugin.

Of course there are a lot of scripts out there that can do this, but sometimes you have to include extra files like css and other things depending on the script, for me, i don’t like that and it’s the main reason that i’ll be working on it.

Currently this jQuery plugin, can display static content, and load ajax content with two options for loading. For simple content, you don’t need to change anything, but, if you need to load more complex content like an external page that uses specific javascript files, you can load it inside an iframe.

I really don’t have a good name for this plugin, so, i’ll be calling this jqPopupBox. So, let’s begin.

First, you just have to include the jqpopupbox.js into you page and everything will be working(Download link available at the end of the post).

Second, the properties of that you can pass to the object:

• color – string – Hexadecimal color for the div that will fill the screen.
  Default: #777
• opacity – float – Opacity value for the div mentioned above.
  Default: .8
• containerColor – string – Color for the container that will have the popup content itself.
  Default: #FFF
• width – int – Width of the container mentioned above.
  Default: 400
• height – int – Height of the container mentioned above.
• Default: 400
• closeText – sting – The tet that will be shown on the close button.
• Default: CLOSE
• close – Function – A callback that will be called when the users close the popup.
• Default: null
• load – Function – A callback that will be called after the popup creation
  Default: null
• useFrame – boolean – Defined if the plugin will be using an iframe for loading external content.
  Default: false
• content – string – The content that will be shown in the popup. If you want to load extenal content, you must specify the full url like ‘http://redvulpine.com’.
  Default: in blank

A simple example

$(document).ready(function () {
	$.popupBox({
		content: 'Hello World'
	});
});

Now, lets suppose that you want to use animations, for loading and closing.

$(document).ready(function () {
	$.popupBox({
		content: 'Hello World',
		load:	function (r, c) {
			c.hide();
			c.show('slow');
		},
		close:	function (r, c) {
			r.fadeOut('slow');
			c.fadeOut('slow', null, this.remove);
		},
	});
});

In the example above, we have two parameters in the callbacks, c and r. Where, c is the popup container and r is the div that blocks the rest of document. Also, you can customize all the elements using theses css selectors:

• jqqpopupbox-region
• jqqpopupbox-container
• jqqpopupbox-close

And, that’s it, nothing more, simple as you can see. Maybe i’ll be doing updates later, like, to load images(of course, you can use other scripts in this case, like fancybox) or flash, youtube maybe?

Well, thanks for reading and I expect that this code be useful to you =)

Version 0.1.1

- Fixed some typo issues

- Fixed issues with page scrolling

Download: jqPopupBox (Version 0.1.1 – IE 6+, FF, Opera, Safari, Chrome)