Thursday, September 9, 2010

Ways to extend the SharePoint Modal Window

So in my last post I simply wanted to show an input form in a SharePoint 2010 modal window. This got my creative juices flowing and I wanted to experiment a little. I found out that you can easily display anything in the Modal window that you wanted.

Web Site: Bing
<a onclick="javascript:NewItem2(event, &quot;;);
javascript:return false;" href="" target="_self">Show Bing In Modal Window</a>


<a onclick="javascript:NewItem2(event, &quot;http://sitename/Images/image.png&quot;);
javascript:return false;" href="/images/image.png/" target="_self">Show Image</a>


This does not really work since most video’s open up in a separate application like Window Media Player and not within the browser. However you can use things like flash .swf files to show in the modal window.
<a onclick="javascript:NewItem2(event, &quot;;);
javascript:return false;" href="" target="_self">Flash Game</a>


So basically you can show basically anything that you have a link to and can be visible within a browser.

Enjoy, and let me know what creative things you have placed in your modal window…


Anonymous said...

This is really helpful, thanks for sharing it, is there a way to fix the height and width of this page? I would like to link to a very simple form on an external website, but it needs to be a little wider.

Anonymous said...


Josey said...

How do you change the "Dialog" title in the top of the modal window?

Anonymous said...

change the title of the destination page and the dialog will show it

Beben Koben said...

you want try this...
popup with javascript">
nice to meet you :)

BRM013 said...

Is there a way to control the dialog's size?

How do you find out what the NewItem2() scripts parameters are? Other than find places in SharePoint where MS are using it? API definitions???


Anonymous said...

Is there a way to have this modal dialog appear automaticallt when the page loads?

Anonymous said...

Can you specify the size of the dialog?

Togotooner said...

Where "specifically" do I enter the code? I'm confused.