PPC.bz Facebook-style Modal Window

Basically a modal window is a "popup" that remains in the same window the user is viewing. Modals are less intrusive than popups / new windows.

Github for this script is here. Click the "Zip" there to download the whole package

Brought to you by ppc.bz

Notes

Caveats

This script builds a DOM element (like most modals), but unfortunately it requires a table to draw it. This shouldn't be an issue for most people, but the general "best practice" for design nerds is to not use tables for formatting. It's certainly possible to modify the script to use CSS only but I don't have time for that.

Files

Usage

Simple enough - Attach "fbmodal" to a Selector (preferrably an "id") with an Event (like a "click" event). See demos for more.

$('#mySelector').live('click',function(){ $.fbmodal({ /* settings go here */ }); });

Settings

Demos

Demo 1 - No / Default Settings

Click here for Demo 1 to see Default Settings (No settings passed)

$('#demo1').live('click',function(e){
	$.fbmodal({
	/*	input settings as object, key/value pairs duh	*/
	});
});
	

Demo 2 - Basic Settings

Let's try it with some basic settings. Here we have set the method to "warning", set a "title" and "text", and we provide a "callback" function if the user Confirms.

Demo 2 - Basic Settings

$('#demo2').live('click',function(e){
	$.fbmodal({
		type	: 'warning',
		title	: 'Warning!  You might have AIDS!',
		text	: 'Do you think <strong>Shoemoney</strong> aka, the <a href="http://www.shoemoney.com" target="_blank">Bald Bomber</a> is cool?',
		callback: function(){ alert("Ewww You have AIDS!");},
		});
});

Demo 3 - Custom Buttons, Forced Click

Custom Buttons have not been tested in-depth, but they do work.
Forcing Click - Notice that all options to close the window have been set to "false," so user will have to click a button to proceed.

Demo 3 - Custom Buttons

    
$('#demo3').live('click',function(e){
	$.fbmodal({
		type	: 'info',
		title	: 'Demo 3 - Custom Buttons',
		text	: 'Click one of the buttons below to confirm your subscription',
		closeTrigger	: false,
		escClose		: false,
		overlayClose	: false,
		buttons	: [{ //been had objects
			'text' : "Click to Confirm",
			'color'	: "blue",
			'callback'	: function(){ alert("You Confirmed!"); $.fbmodal.close(); }
		},{
			'text' : "or Exit",
			'color'	: "grey",
			'callback'	: function(){ alert("You Cancelled"); $.fbmodal.close();}
		}]
    });
});    

Demo 4 - Ajax

First off, get familiar with jQuery's Ajax API

By default, this will just grab the file and place it in the fbmodal, but you can also pass in options

Demo 4 - Ajax

$('#demo4').live('click',function(e){
	$.fbmodal({
		loading : '<img src="img/loading.gif" />',
		type	: 'info',
		method	: 'ajax',
		href	: 'demo.php',
		title	: 'Demo Number 4 - With Ajax',
		loaddata: {
			"myOption" 	: "demo4"
        },
        width: 500,
    });
});

Demo 5 - Callback with Ajax

What if we wanted feedback from the user before doing something with Ajax? We can pass a jQuery Ajax call into the callback function of this script.

Notice that the method is "text", not "ajax", because we want to display something (a form) to the user first. Also notice this is an "info" because "warning" will use its default button set.

Demo 5 - Callback with Ajax

There are a number of ways to do such an Ajax call. You can make the call to a file and handle it server-side. This way the responsetext can have its own javascript that you can run on success.

$('#demo5').live('click',function(e){
	$.fbmodal({
		loading : '<img src="img/loading.gif" />',
		type	: 'info',
		text	: '<form id="form5"><label for="number">Select a Number then Push OK</label><select name="number" id="number"><option>Select One</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="69">69</option></select></form>',
		title	: 'Demo Number 5 - Callback, then Ajax',
		width: 500,
		buttons	: [{ //been had objects
			'text' : "Submit That Thing",
			'color'	: "blue",
			'callback'	: function(){ 
				var thisoption = $('#number').val();//get option value
				if ( thisoption === "Select One"){ alert("Select a godamn number chump");return false;}
				else {
                //first empty the contents of the fbmodal "content" area, then put some stuff it in based on what happens with the ajax call
					$('.fbcontent').empty().append('<div style="padding:10px 50px;"><img src="img/loading.gif" /></div>');
					$.ajax({
						type: 'POST',
						"url" : 'demo.php',
						"data": {
							"myOption" 	: "demo5",
							"myNumber"	: thisoption ,
						},
						success:function(data){
							// do some stuff here with a successful ajax call
							$('.fbcontent').empty().append("<p>"+data+"</p>");
						},error: function(){
							alert("Failed to load demo.php page");
						}
					});//end ajax
				}//end "else" (no option was selected)
			}//end first button options
		}//end first button object
		,{
			'text' : "Cancel",
			'color'	: "grey",
			'callback'	: function(){ $.fbmodal.close();}
		}]//end buttons
    });// end modal
});

Positioning

If you want to dynamically position the fbmodal window, you would do it like this...

$('#positioned').live('click',function(e){
/*  Notice that this is a function of "e", the event.  
    We need this to prevent the default action.  Most of the time, 
    and by default, this is a function of nothing: function() */
	var eleposition = $(this).offset(); // get the position of this id ( see jQuery 'offset' documentation)
	e.preventDefault(); 
	/* ^ prevent default link action.  
    	If your link is href="#" then the default action is to jump to that anchor, 
	    which is basically the top of your window. This prevents that "jump" */
    $.fbmodal({
        modaltop : eleposition.top, // put the 'top' distance from the element position here
        /*	then  the rest of your settings	*/
        });
});