Implementation of FancyBox using Jquery in Asp.net

Steps for  FancyBox implementation in Asp.net 

Step 1: Add script and style to Header in Caller Design Page

<script src=”fancybox/jquery-1.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”fancybox/jquery.mousewheel-3.0.4.pack.js”></script>
<script type=”text/javascript” src=”fancybox/jquery.fancybox-1.3.4.pack.js”></script>
<link rel=”stylesheet” type=”text/css” href=”fancybox/jquery.fancybox-1.3.4.css”
media=”screen” />
<script type=”text/javascript”>
function OpenPopup() {
//take value in variables to send data
// var portalId = $(“input[id$=hdnPortalId]”).val();
// var portalEmail = $(“input[id$=hdnPortalSettingEmail]”).val();
// var code = $(“input[id$=hdnCode]”).val();
// var reUrl = window.location.href;
jQuery.fancybox({
‘width’: ‘auto’,
‘height’: ‘auto’,
‘border’: ‘1px solid ‘,
‘autoScale’: false,
‘transitionIn’: ‘none’,
‘transitionOut’: ‘none’,
‘hideOnOverlayClick’: false,
‘href’: ‘/JQueryFancyBox/UseOfFancyBox.aspx’,
// If you want to send the data using querystring then use below href line
// ‘href’: ‘/JQueryFancyBox/UseOfFancyBox.aspx?PId=’ + portalId + ‘&PEmail=’ + portalEmail + ‘&Code=’ + code + ‘&Url=’ + reUrl,
‘type’: ‘iframe’
});

}
</script>
<style type=”text/css”>
#fancybox-content
{

background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #04448D !important;
float: left;
height: 220px; /*Height of fancy box*/
margin: 0;
outline: medium none;
padding: 0;
position: relative;
width: 351px; /*Width of fancy box*/
z-index: 1102;
}
</style>

Step 2: Add design in Caller Design Page

<div id=”test” onclick=”OpenPopup();” style=”cursor: pointer”>
Click Me!</div>

/*Popup will open on div click*/

Step 3: Add another page to display data on Caller Page

I’m using this UseOfFancyBox.aspx to display data

Download Sample

JQueryFancyBox