it outsourcing, web programming, emarketing, econsulting, it consultant, internet consultant, we knows all about internet

March 13, 2010

.net acces Ajax Ajuntament ASP asp.net c# css CSS2 Enterprise export globaria google gridview hibernate mapping hotel jquery linux mallorca Mamacarter Maquetación massimo estudio melia mysql Php Planeta Web SEO share files trivia XHTML

Contact us

If you have any doubt or suggestion, you may contact us with the next form:

This field is required.

Please enter a valid email.

How did you hear about us? Google Other Advertising Friend's recomendation Third party site Yahoo Comment

This field is required.

Hello... today I'm gonna teach you how to show a popup with FancyBox.

FancyBox is a tool to show images, html content and multimedia content in a window LightBox like

It was developed using the jQuery library.

Let's go to the example!

First of all, we should add to the page that is going to contain our button to activate the popup, the references to the .js and the .css of FancyBox

Well, after that, we should add the next javascript code to initialize the button.

Here, a brief explanation of the properties:

frameWidth: width of the popup
frameHeight: height of the popup.
hideOnContentClick: if it's true, when we click in any part inside the popup, this will hide
overlayOpacity: the opacity of the popup background.

Well, now in our html we should have a button with the id "popup"

Open popup

It's necessary that the button have the class property set with the value iframe.
The href property must be set with the html we want to show in the popup.

And that's all... simple as that. We have our popup working with FancyBox!

Tags: popups, lightbox, fancybox

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Add comment
Write your comment
This field is required.	Please enter a valid email.
Comment This field is required.
Security code:	Enter code: