SHarepoint 2010 - popup an image for 5 second after i open my site

Question

How i can popup an image that display for 5 second as slogan/announcement after opening my sharepoint site welcome page

As Example: http://www.lebanese-forces.com

regards,

Hass

Answer 1

Hass,

You can use SP.UI.ModalDialog class from javascript and use _spBodyOnLoadFunctionNames to call it on Page Load, you will need to create a page and add image on it...

<script language="javascript" type='text/javascript'>
 _spBodyOnLoadFunctionNames.push('showPopup'); 

  function showPopup() {
     var options = {
        title: "My Dialog Title",
        width: 400,
        height: 600,
        url: "/_layouts/DialogPage.aspx" };

    SP.UI.ModalDialog.showModalDialog(options);
  }
</script>

Then for closing pop up after 5 seconds, you can write JavaScript on the DialogPage.aspx like:

 <script language="javascript" type='text/javascript'>

   function closePopup() {
     window.frameElement.commitPopup();
   }

   window.setTimeout("closePopup();", 5000);

   </script>

Answer 2

A better way would be to do it is in-page for sharepoint with JavaScript, redirect pages won't play that well.

You need to make a custom webpart at the least maybe a template. If you are already using a custom template on your site that may be easier.

Example in practice of the below code.

In your web part you need to do something akin to the following (I have chosen this code to be a lightweight solution which will require minimal code and very little browser/device power)

// Using JQuery - Add this to your template/webpart above the javascript
<style>
    #welcome_message {
        height: 300px;
        width: 300px;
        top: 50%;
        left: 50%;
        margin-left: -140px;
        margin-top: -140px;
        background-color: white;
        padding: 10px;
        position: absolute;
    }
    #blackout_curtain {
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        border: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        position: absolute;
    }
</style>

<div id="blackout_curtain"></div>
<div id="welcome_message">Yo whats-up!</div>

<script>
    $('document').ready(function(){  
        // Remove if user wants to on click
        $('#welcome_message,#blackout_curtain').bind('click', function() {
                        $('#welcome_message').hide();
                        $('#blackout_curtain').hide();
                    });
        $('#welcome_message').delay(5000).queue(function(x) {
            $(this).fadeOut('slow');
            $('#blackout_curtain').fadeOut('slow');
            x();
        });
    });
</script>

If you are using SharePoint 2013 you can add this in the head, but if you don't care about validation (You're using 2010 it can go in the body :P)

<noscript>
    <style>
       #welcome_message, #blackout_curtain { display: none!important; }
    </style>
</noscript>

This all gives a nice lightweight solution, that is cross browser and looks really sexy.