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,

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>
Note: popup box id is same as href of step 2.

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>
You can see resulted screen shot below:
facebox-popup

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.

5 thoughts on “How to create Popup box with facebox and jquery

  1. anyone know how to
    dynamic tabs and pills

    (link-
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h
    )

    if any one knows then
    send me mail please ….

    (Thanks)

    [email protected]

Leave a Reply

Your email address will not be published.