Show Modal Popup Per Session In SharePoint

In this article, I will elaborate How to

Display A Modal Popup Per Session in SharePoint.

show a fancy box as a Popup Modal Per Session in SharePoint


Scenario

I need to show a Modal popup window in SharePoint site. This is modal popup should be only shown when opening the SharePoint site one time for each user based on his session.

In this article, I will use the FancyBox as an amazing modal popup window.


Steps

  • First, check the current Custom Master Page that you already used in SharePoint site.
  • Open the SharePoint site -> Site Action -> Site Setting -> Master Page.

Look and feel - Master Page

  • Click “Master Page”.

Site Master Page in SharePoint

  • Open the “Style Library” to upload FancyBox and JQuery files.

Open "Style Library' in SharePoint

  • Open the “Style Library” via the “Windows Explorer” to copy the downloaded files.

Show Modal Popup as announcement in SharePoint

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

Show Modal Popup as announcement in SharePoint

  • Open the SharePoint Designer -> Master Page.
  • Take a copy from the current master page to be able to rollback.

Show Modal Popup as announcement in SharePoint

  • Rename the copied master page with an appropriate name.
  • Edit Master Page in advanced mode.

Edit Master Page In Advanced Page

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

Reference JS / CSS files to Master Page


<!-- Add jQuery library -->

<a href="http://../../../Style%20Library/JS/JQuery/jquery-1.4.3.min.js">/Style%20Library/JS/JQuery/jquery-1.4.3.min.js</a>

<!-- Add fancyBox -->

	

<a href="http://../../../Style%20Library/JS/fancybox/jquery.fancybox-1.3.4.pack.js">/Style%20Library/JS/fancybox/jquery.fancybox-1.3.4.pack.js</a> <a href="http://../../../Style%20Library/JS/fancybox/jquery.mousewheel-3.0.4.pack.js">/Style%20Library/JS/fancybox/jquery.mousewheel-3.0.4.pack.js</a>

<!-- Add HQuery Cookie -->

<a href="http://../../../Style%20Library/JS/JQuery/jquery.cookie.js">/Style%20Library/JS/JQuery/jquery.cookie.js</a>

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

Show Modal Popup as an announcement in SharePoint

  • Again, Add the following code to the Head Tag.



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;
});
});



  • Add the following code to the Body Tag.

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

  • Check-in your Master Page as Major Version.

checkinmasterpage

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

publishasmajor

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

masterpage

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

selectnewmasterpage

  • Apply this master page to all subsites.

applumasterpagetoallsubsite

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

show a fancy box as a Popup Modal Per Session in SharePoint


Applies To
  • SharePoint 2013.
  • SharePoint 2010.
Conclusion

In this article, I have explained How to show an announcement Modal Pop up message only one per session in SharePoint.

Advertisements

One thought on “Show Modal Popup Per Session In SharePoint

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s