Load Popup only once per session when SharePoint site url entered in Browser

Load  Popup only once per session when SharePoint site url  entered in Browser

I need to show Modal popup window only once per session when open SharePoint site in the first time. I  checked the type of modal popup and found the FancyBox is fantastic popup that meet my requirement.

The Output will seem as the following Image shown below:

• To achieve this Please follow the simple steps mentioned below:
• First check what’s your Custom Master Page that used in your site.
• Open your SharePoint site –> Site Action –> Site Setting –> Master Page.

• Click Master Page, now you know what’s the default master page for your SharePoint site in this case is V4.master.

• Open Style Library to upload FancyBox and JQuery files (You can download this files by click FancyBox &JQuery).

• Open library by windows explorer to copy the downloaded files.

• Don’t forget to check-in and publish  all the uploaded files as Major version.

• Open SharePoint Designer –> Master Page –> Copy current master page in this page V4.master. (We recommend working in a copy of  your current Master Page ).

• Rename the copied master page with an appropriate name in this case V4_Ad.master, edit Master Page in advanced mode.

• Add the reference to FancyBox, JQueryand CSS files in the Head Tag.

<!– Add jQuery library –>
<script type=”text/javascript” src=”../../../Style Library/JS/JQuery/jquery-1.4.3.min.js”></script>
<!– Add fancyBox –>
<link rel=”stylesheet” href=”../../../Style Library/JS/fancybox/jquery.fancybox-1.3.4.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”../../../Style Library/JS/fancybox/jquery.fancybox-1.3.4.pack.js”></script>
<script type=”text/javascript” src=”../../../Style Library/JS/fancybox/jquery.mousewheel-3.0.4.pack.js”></script>
<!– Add HQuery Cookie –>
<script type=”text/javascript” src=”../../../Style Library/JS/JQuery/jquery.cookie.js”></script>

• Pick your URL based on your location that you upload FancyBox and JQuery files.

• Add the following code in Head Tag too.

<script type=”text/javascript”>
function openFancybox() {
setTimeout(function () {
$(‘#yt’).trigger(‘click’);
}, 500);
};
$(document).ready(function () {
var visited = $.cookie(‘visited’);
if (visited == ‘yes’) {
return false; // second page load, cookie active
} else {
openFancybox(); // first page load, launch fancybox
}
$.cookie(‘visited’, ‘yes’, {
expires: 7 // the number of days cookie will be effective
});
$(“#yt”).click(function () {
$.fancybox({
href: this.href,
type: “image”,
transitionIn: “elastic”,
transitionOut: “elastic”
});
return false;
});
});

</script>

• Add the following code in Body Tag.

<a id=”yt” style=”display:none” href=”../../../Style Library/Images/AdForUpdate.jpg”></a>

• Check-in your Master Page as Major Version.

• The following dialog will be shown to publish your Master Page as Major Version.

• Open your site –> Site Action –> Site Settings –> Master Page

• Click Master Page and change your master page with the new Master Page.

• Apply this master page to all subsites.

• Try to browse your site you will note the popup window will show onload only once per session.

Note:

If you need to show it every time you load home page you can type the previous code in your home page layout, remove the cookie section in javascript function.(If you need to know more details about his point please don’t hesitate to comment in this post to elaborate more).

Enjoy :)