Wednesday, September 15, 2010

How to create a popup window like SharePoint 2010 popup

Everytime we want to create or configure out something on SharePoint 2010 site, Microsoft will show a popup window with the forms according to our action. It looks like:


So, if you want to use popup like SharePoint 2010, it's very easy, just copy and paste the code below:

<a href="javascript:NewItem2(event, your_url)">click example</a>

However, you will only get the default of windows size in the popup. If you want to resize that popup to be smaller or bigger, you must use another function.

<a href="javascript:OpenPopUpPageWithTitle(your_url, CallBackFunction, width, height, null)">Click example</a>

The code above just describe how to open the windows and execute the javascript code after window loading completely. Now, the another purpose is to execute an another javascript function after close window. how to?

You can custom this method with any actions as you want, here is example:

if (typeof SP.UI.Dialog.close == 'function') {
    var old = SP.UI.Dialog.close;
    SP.UI.Dialog.close = function(dlgResult) {
        //TODO: your code here
        //Remember that, your code must be executed before calling original method, because original method will close your popup before you perform something.
         old();
    }
}

Here are some method extracted from SP.UI.Dialog

.get_firstTabStop();
.get_lastTabStop();
.get_url();
.get_html();
.get_title();
.get_args();
.get_allowMaximize();
.get_showClose();
.get_returnValue();

.set_returnValue(value);

....
Good luck to you!

1 comment:

Anonymous said...

How can I call this pop up on page load. I need to put a pop up disclaimer message on my harepoint home page.