How to create Popup box with facebox and jquery

Now in web 2.0 the UI is a very important part of web development. So Javascript and CSS is playing a very important role in web development.

Here, I am discussing how to create a popup box with help of facebox and jquery. It’s very simple and easy. You can download facebox from here.

Checkout other Popup tutorials,

• How to create Popup box with facebox and jquery
• How to Create Awesome Popup box Using Bootstrap Popover
• How to Create Modal box Using File Path
• How to Create Modal box Using Jquery Template

Simple Facebox Example With jQuery

Step 1: First we will include js file and jquery file of facebox.

<script src="lib/jquery.js" type="text/javascript"></script><br><script src="src/facebox.js" type="text/javascript"></script>

Step 2: Now create a link in HTML to display the popup.

<div>
<p><a href="#info" rel="facebox">Click to display</a></p>
</div>

Step 3: create popbox and include all the content which is want to display in HTML file.

<div id="info" style="display: none;">

Popup div

It looks great!

</div>

Step 4: Now include js code to display facebox popup.

<script type="text/javascript"><br />
    jQuery(document).ready(function($) {<br />
      $('a[rel*=facebox]').facebox({//apply all anchor tag which has rel=facebox attribute<br />
        loadingImage : 'src/loading.gif',<br />
        closeImage   : 'src/closelabel.png'<br />
      })<br />
    })<br />
  </script>

Conclusion

This is a simple tutorial of facebox examples using jquery. The facebox is to use and integrate with your application without any coding knowledge.

You can download source code and Live Demo from below link.