Pop-up in SharePoint using SP.UI.ModalDialog

How to make a Web-part to open as a Pop-up in a SharePoint page when the page loads?

Solution:

1.       Build your Web-part ( use Visual Studio to create your WebPart)

2.       Create 2 CSS file Pop-up-Page.css  and  Pop-up-WebPart.css.  

      Add these 2 CSS file to /Style Library.

You can link the Pop-up-WebPart.css file in your VisualWebPart.ascx file to be able to style your Web-part as below.

<link href="../Style Library/Pop-up-WebPart.css" rel="stylesheet" />

3.       Use the  Pop-up-Page.css  to hide all content and the SP Ribbon except for the WebPart you’ve added to the page.  So when you navigate to this page you’ll see just your WebPart but nothing else (no SP Ribbon, no footer, no Menu …).

Here is inside my Pop-up-Page.css file

<style>

.ms-breadcrumb-box, .ms-mpSearchBox, #sideNavBox, .article-content > .ms-rtestate-field > p, #footer {

      display: none;

}

#titleAreaBox {

      margin: 0;

}

.ms-siteicon-a {

      cursor: default;

      text-decoration: none;

}

.ms-siteicon-img {

      max-width: 180px !important;

      max-height: 64px !important;

}

#contentRow {

      padding: 0;

}

#contentBox {

      margin: 0;

      min-width: inherit;

}

div.article, .article-content {

      padding: 0;

}

.ms-webpartzone-cell {

      margin-bottom: 5px;

}

</style>

4.       In your SharePoint Site, add a page name Pop-up.aspx

5.       Edit this page and add your WebPart.

6.       Add a Content Editor with /Style Library/Pop-up-Page.css 

7.       Don’t forget to remove the page Title.

8.       Create a JS file with the below content:

<script type="text/ecmascript">

function setCookie(cname, cvalue, exdays) {

    var d = new Date();

    d.setTime(d.getTime() + (exdays*24*60*60*1000));

    var expires = "expires="+d.toUTCString();

    document.cookie = Popup + "=" + cvalue + "; " + expires;

}

function getCookie(cname) {

    var name = cname + "=";

    var ca = document.cookie.split(';');

    for(var i=0; i<ca.length; i++) {

        var c = ca[i];

        while (c.charAt(0)==' ') c = c.substring(1);

        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);

    }

    return "";

}

var Cookievalue=getCookie("Popup");

if (Cookievalue != "") {  

    

 } else {         

           SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ShowDialog);

          }

function ShowDialog() {

        var options = {

            url: 'http://YourWebApplication/Pages/pop-up-page.aspx',

            dialogReturnValueCallback:CloseCallback,           

            height: 400,

            width:800          

        };

        SP.UI.ModalDialog.showModalDialog(options);

        }

function CloseCallback(result, target) {

     if(result==SP.UI.DialogResult.OK) {

        window.location.href='http:// YourWebApplication /Pages/ pop-up.aspx';

       }

        if(result==SP.UI.DialogResult.cancel){  

          SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'cancel Clicked');

        }     

    }

</script>

9.       As you see I have a function getCookie(cname) in the JS file above. I use it to set Cookie for my Pop-up. If you don’t need Cookie, then you can use the below JS code:

<script type="text/ecmascript">

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ShowDialog);

function ShowDialog() {

        var options = {

            url: 'http://YourWebApplication/Pages/pop-up-page.aspx',

            dialogReturnValueCallback:CloseCallback,           

            height: 400,

            width:800          

        };

        SP.UI.ModalDialog.showModalDialog(options);

        }

function CloseCallback(result, target) {

     if(result==SP.UI.DialogResult.OK) {

        window.location.href='http:// YourWebApplication /Pages/ pop-up.aspx';

       }

        if(result==SP.UI.DialogResult.cancel){  

          SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'cancel Clicked');

        }     

    }

</script>

10.   Add the popup.js file to /SiteAssets/Forms/AllItems.aspx

11.   If you want this page(with your Web-part) to pups-up when users navigate to your homepage, then edit the Home page > Add a Content Editor with  /SiteAssets/Pupop.js

12.   Also you can use the below script in your Web-part to close the popup, Set Cookie or change the popup height.

<script>

      function ClosePopup() {

          window.frameElement.cancelPopUp();

      }

      function SavedInlist() {

          setCookie("Popup", "saved", 180);

      }

      function CloseAndSavedInlist() {

          setCookie("Popup", "saved", 180);

          window.frameElement.cancelPopUp();

      }

      function setCookie(cname, cvalue, exdays) {

          var d = new Date();

          d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));

          var expires = "expires=" + d.toUTCString();

          document.cookie = cname + "=" + cvalue + "; " + expires;

      }

      function ChangeHight() {

          window.frameElement.style.height = "500px";

      }    

  </script>

            For example if there is a NO button in your Web-part, you can use the  ClosePopup() function to close the popup from your Web-part.

<asp:Button ID="No" runat="server" CSSClass="Btn" Text="No" OnClientClick="ClosePopup()"/>

Happy SharePointing

Kate