In Tutorial by admin December 10, 2011

FBModal jQuery plugin

FBModal is a jQuery plugin that is the first Facebook replica modal dialog.

View it in action, in the video below.

Watch in full screen for best results.

Live Demo Download USAGE FBModal provides a simple ways to invoke a modal dialog. First include the jquery.fbmodel.js file and jquery file and css file.

<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" />

1.7.1/jquery.min.js"></script>

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:

$("#your-element-id").fbmodal();

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

$("#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" 
});

$("#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.

$("#your-element-id").fbmodal({close: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.

<!-- 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>

<!DOCTYPE>

<html>

<head>

<title>FBModal by RRPowered.com</title>

$(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>

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 Version 2-26 Opera Version 9-18 Safari Version 3-7 Chrome Version 1-31