FBModal is a jQuery plugin that is the first Facebook replica modal dialog.
USAGE
FBModal provides a simple ways to invoke a modal dialog.
First include the jquery.fbmodel.js file and jquery file and css file.
1 2 3 4 5 6 7
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fbmodel.js"></script>
<link rel="stylesheet" type="text/css" href="fbmodal.css" />
As a chained jQuery function, you can call the fbmodal() function on a jQuery element and a modal dialog will be displayed using the contents of that element. For example:
1
$("#your-element-id").fbmodal();
OPTIONS
title [Text]
Dialog title text
cancel [Text]
Cancel button text
okay [Text]
Okay button text
okaybutton [Boolean:true]
Show the ok button
cancelbutton [Boolean:true]
Show the cancel button
buttons [Boolean:true]
Show the buttons
opacity [Number]
The opacity value for the overlay div, from 0.0 – 100.0
fadeout [Boolean:true]
When dialog is closed fade out
overlayclose [Boolean:true]
Allow click on overlay to close the dialog?
modeltop [Number:null]
Position from top of page 0% – 100% or 0px – 99999px
modelwidth [Number:null]
The width for the dialog container
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
$("#your-element-id").fbmodal({
title: "FaceBook Modal Demo",
cancel: "Cancel",
okay: "Okay",
okaybutton: true,
cancelbutton: true,
buttons: true,
opacity: 0.0,
fadeout: true,
overlayclose: true,
modaltop: "30%",
modalwidth: "400"
});
CLOSING THE DIALOG
Now to close the dialog. Set your element id. Your element id is the id of the content inside of the dialog. Next set the
option close to true.
1
$("#your-element-id").fbmodal({close:true});
How to use in your project.
Here is an example of how you can use FBModal in your project. Simply include the latest jQuery library, the plugin file and the css file.
Then call the fbmodal() function on a jQuery element and a modal dialog will be displayed using the contents of that element. It’s that simple.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
<!-- FBModal Created by Barrett at RRPowered.com -->
<!-- File name index.html -->
<!DOCTYPE>
<html>
<head>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"src="jquery.fbmodel.js"></script>
<link rel="stylesheet" type="text/css" href="fbmodal.css" />
<title>FBModal by RRPowered.com</title>
<script type="text/javascript">
$(function(){
/*When the link with the id of "open" is clicked, we will open the modal.*/
$("#open").click( function(){
/*The div with the class of "test" will be used for the modals inside content.*/
$(".test").fbmodal();
});
</script>
</head>
<body>
<div class"test">
FBModal the first FaceBook replica dialog
<a href="javascript: vaoid()" id="close" name="close">Close this dialog</a>
</div>
<b>Click to open:</b><a href="javascript:void()" id="open" name="open">Modal 1</a><br />
</body>
</html>
BROWSER COMPATIBILITY
FBModal has been tested in the following browsers
Firefox 2, 3, 4
Opera 9, 10
Safari 3, 4, 5
Chrome 1, 2, 3, 4, 5, 6
My name is Barrett and I am a Web Developer/Designer specializing in CSS, PHP, jQuery, Mysql and JavaScript.