Home > customization and design, SharePoint Server 2010 > Open a popup window on loading SharePoint Homepage

Open a popup window on loading SharePoint Homepage

Many times we need to open popup window on loading our homepage in SharePoint to tell to our users there are an important thing happened or to tell them we need to do something such as loading popup window while loading SharePoint homepage to tell to user we need  you to do specific survey . by clicking on any place inside the window redirect him to survey window.

Now , let us do something like this. We need to open POPUP window to enforce users to complete specific survey.

1-     Firstly, we need to create an  application page for the Page which will POPUP while loading the page. (this is not our topic now how to create new application page)

2-     Add content editor web part to homepage.

 

3-     Create JavaScript function and put it in a text file or script file. Then load this file to any document library . then take the URL of this file and add it in content editor web part which we have added in previous  step.

What happened here ?? we added link to our JavaScript function in content editor web part in homepage. While loading content editor web part in loading page phase, java script function will be called to popup our window in loading page.

JavaScript Code:

 

<SharePoint:ScriptLink ID=”ScriptLink1″ Name=”sp.js” runat=”server” OnDemand=”true” Localizable=”false” />

 

<script type=”text/ecmascript”>

 

ExecuteOrDelayUntilScriptLoaded(ShowDialog, “sp.js”);

 

function ShowDialog() {

        var options = {

            url: ‘http://PSDEMO/_layouts/POPUPWINDOW/POPUPWINDOW.ASPX&#8217;,

                        dialogReturnValueCallback:CloseCallback,

            height: 500

        };

 

        SP.UI.ModalDialog.showModalDialog(options);

        }

    function CloseCallback(result, target) {

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

     {

       window.location.href=’http:// PSDEMO /Pages/Polls.aspx’

     }

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

     {

      

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

     }

       

    }

 

</script>

 

4-     Upload java script file to any document library

5-     Then add link to JavaScript file in Content editor webpart.

6-     Then click apply and ok , u will see popup window in loading.

Advertisements
  1. khaled
    January 3, 2012 at 12:35 pm

    good article Ahmed , where are you the last 6 months it’s along time since your last update 🙂

  2. January 3, 2012 at 12:46 pm

    Thanks, i’m in a business trip, i’m trying to finish it ASAP, don’t worry, Almost, i’ll Update my blog every day.:)

  3. Shankar
    December 19, 2012 at 8:07 pm

    Nice post. I implemented this with a sharePoint page & content editor webpart. I have custom image buttons to navigate upon Accept & Reject. how do i open the destination pages in the same window instead of new windows? Is Application pages the only solution for this?

  4. Anand
    February 22, 2013 at 11:25 am

    Hi,

    Its a nice post. I would like to configure similar functionality for one of our shareponit website.

    Plz Can you give me detail idea on this. Is teh above script can be reused ?

    • February 22, 2013 at 12:30 pm

      Yes you can but don’t forget to change ” url: ” parameter to your web application URL .Try it and if you have any question don’t hesitate Contact me.

  5. Panos
    May 20, 2013 at 6:40 am

    Hi Ahmed,
    I am trying to do this, but I don’t get 2 points from your example:
    in the file that I will include in the content editor, you mention a)‘http://PSDEMO/_layouts/POPUPWINDOW/POPUPWINDOW.ASPX’ and then b)http:// PSDEMO /Pages/Polls.aspx’.
    I get the first one (…_layouts…), which is the page that is in the Hive (/12) directory and that is the page that will be loaded inside the popup.
    However, I don’t get the second one: Polls.aspx.
    Why do you mention two pages in the code?

    • May 20, 2013 at 1:46 pm

      HI,
      My Idea here is Opening Popup Window on page loading to ask the user to answer specific Poll or survery , so if the user click on Image Button,then he will redirected to “http:// PSDEMO /Pages/Polls.aspx” where POll Webpart exist, if he cancel or click on “×” Close, then he will stay in home page. so “http:// PSDEMO /Pages/Polls.aspx” is optional, this is a page i have created to host Poll Webpart. so my be ur idea is different, so you can ignore this “http:// PSDEMO /Pages/Polls.aspx”.

      Please, if you have any questions or comments, don’t hesitate to contact me

  6. Yousef
    July 3, 2013 at 9:10 am

    Hi,
    I want apply a pop-up window for a picture in SharePoint 2007 .
    Can I do your steps in sharepoint 2007 ?.
    thanks.

    • July 5, 2013 at 6:17 pm

      No, there is no Dialog Framework in MOSS 2007, try another approach

  7. December 23, 2013 at 7:24 am

    Hello mates, its great article concerning teachingand fully explained,
    keep it up all the time.

  8. iscromanpc
    March 20, 2014 at 8:14 pm

    Good solution… Worked for me with my SP2010 survey!

    It’s very useful in combination with this other solution.

    http://sharepoint.stackexchange.com/questions/64357/friendly-message-when-user-tries-to-take-the-survey-again

    Now I have a script that are working like this: If you have not answered the survey, the popup opens for you to answer, otherwise takes you to another page or simply does not show the popup.

    Thank you!

  9. swathi
    October 20, 2014 at 3:10 pm

    Hi Ahmed,

    Instead of Application page, can I use SharePoint site page?
    Please let me know.

    • October 20, 2014 at 3:39 pm

      Hi,

      Yes sure, you can use SP site page , just change the path of Url attribute in JS ShowDialog() function to url: ‘http://PSDEMO/SitePages/XXX.aspx

      function ShowDialog() {

      var options = {

      url: ‘http://PSDEMO/SitePages/XXX.aspx’,

      dialogReturnValueCallback:CloseCallback,

      height: 500

      };

      • swathi
        December 12, 2014 at 3:49 pm

        Hi Ahmed,

        I have put the below code directly in the content editor web part. The model dialog doesn’t pops up. Can you please check my code and let me know where I am doing mistake. Here I am using site page instead of application page.

        ExecuteOrDelayUntilScriptLoaded(ShowDialog, “sp.js”);

        function ShowDialog() {

        var options = {

        url: ‘https://xxx.org/Sandbox/sp/SitePages/MeritTool_Test.aspx’,

        dialogReturnValueCallback:CloseCallback,

        height: 500

        };
        }

    • December 12, 2014 at 5:23 pm

      Hi,
      you forget to add a reference to sp.js

      • swathi
        December 12, 2014 at 5:32 pm

        Can you please let me know how do i do that. Please send me the working code.

      • chewhwee
        June 17, 2015 at 8:19 am

        Hi Ahmedma,

        I tried using the below script, but pop up doesnt appear. Can i seek for your help to check if the script is correct?

        ExecuteOrDelayUntilScriptLoaded(ShowDialog, “sp.js”);

        function ShowDialog() {

        var options = {

        url: `http://collab.micron.com/sites/fab10/fqem/SitePages/F10QEMTS.aspx’,

        dialogReturnValueCallback:CloseCallback,

        height: 500

        };

        SP.UI.ModalDialog.showModalDialog(options);

        }

        function CloseCallback(result, target) {

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

        {

        window.location.href=`http://collab.micron.com/sites/fab10/fqem/Pages/technicalpapercommittee.aspx’

        }

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

        {

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

        }

        }

      • February 27, 2016 at 6:58 pm

        Hi,,

        did you add a reference to sp.js

        ??

        please review my script .

  10. Swathi
    October 23, 2014 at 5:18 pm

    Hi Ahmed,

    I have paste the below code in a notepad++ and saved as test.html then uploaded to a Site Assets library. Then added the test.html file link to a content editor web part. But nothing happens. No modal dialog pops up. Can you please help me on this.

    ExecuteOrDelayUntilScriptLoaded(ShowDialog, “sp.js”);

    function ShowDialog() {

    var options = {

    url:‘https://myserver.org/Sandbox/sp/SitePages/Open%20Enrollment.aspx’,

    dialogReturnValueCallback:CloseCallback,

    height: 500

    };

    SP.UI.ModalDialog.showModalDialog(options);

    }

    function CloseCallback(result, target) {

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

    {

    window.location.href=’https://myserver.org/Sandbox/sp/SitePages/How%20To%20Use%20This%20Library.aspx’

    }

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

    {

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

    }

    }

  11. Naveen
    February 10, 2016 at 8:54 pm

    Hi all

    I have a requirement that

    I have a SharePoint 2010 Intranet website and i need to Show a Popup window When some user enters to that site. It should have only one option to close it.

    Can some one help me please on this

    • February 27, 2016 at 6:53 pm

      Hi Naveen,

      you can apply the steps i mentioned above in my post, if you need any help just ping me here.

  12. May 24, 2016 at 7:12 am

    Hi,

    thank you for a great script! I have used it successfully in our Sharepoint teamsite. But I can’t get it work in our intranet or internet, which are Sharepoint publishing sites. The script works fine, when the page with the script is not published. After publishing the page nothing happens; the popup window won’t pop up. Would you have any idea or a solution, how to show popup on loading Sharepoint page in a publishing site?

    • May 25, 2016 at 8:38 am

      Hi Elina, i just developed CSOM Code to do the same function, if you are interested , plz send me your email address . also it is uses JS and JQuery

      • Elina Haapaniemi
        May 25, 2016 at 9:01 am

        Hi, that would be great. I’m very interested 🙂

        Elina haapaniemi.elina@gmail.com

        2016-05-25 11:38 GMT+03:00 ahmedmadany :

        > ahmedmadany commented: “Hi Elina, i just developed CSOM Code to do the > same function, if you are interested , plz send me your email address . > also it is uses JS and JQuery ” >

  13. November 3, 2017 at 7:39 pm

    Hi Ahmed,
    Is there any why to show pop up only first time they open the page?

    Thanks,

    • November 4, 2017 at 2:10 pm

      Hi Mina,

      of course you can do it , you can manage it by tracking the user action using cookies if you want to implmenet it through client side , or you can track the user action using server-side by loggin the user click in any sp list. if you need any further details, don’t hestiate to send me.

  1. No trackbacks yet.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: