Most of the examples of using dialogs in SharePoint refer to calling other pages, effectively creating a popup iframe. This approach is both useful and reasonably well documented (Charlie Holland’s blog has the best examples I’ve seen to date).

<script>

	function ShowDialog()
	{
		var options = {
			url: 'http://www.google.com',
			autoSize:true,
			allowMaximize:true,
			title: 'Test dialog',
			showClose: true,
		};
		var dialog = SP.UI.ModalDialog.showModalDialog(options);
	}

</script>

<a href="javascript:ShowDialog()">Boo</a>

What isn’t well documented is using SharePoint modal dialogs to render dynamically generated html. When you call SP.UI.ModalDialog.ShowModalDialog you need to pass in a SP.UI.DialogOptions object. Charlie kindly posted the list onto MSDN, but with regards to passing in html it’s incorrect. It seems to indicate that raw html can be passed in.

<script>

	function ShowDialog()
	{
		var htmlString = 'hello world';

		var options = {
			html: htmlString,
			autoSize:true,
			allowMaximize:true,
			title: 'Test dialog',
			showClose: true,
		};

		var dialog = SP.UI.ModalDialog.showModalDialog(options);
	}

</script>

<a href="javascript:ShowDialog()">Boo</a>

However if you try this you’ll just get an error like this:

Message: Object doesn't support this property or method
Line: 2
Char: 18225
Code: 0
URI: http:///_layouts/sp.ui.dialog.js?rev=IuXtJ2CrScK6oX4zOTTy%2BA%3D%3D

This is because the string that gets passed in is evaluated for nodeType (if you want to check for yourself, see around line 764 in SP.UI.Dialog.debug.js, there is a function that the html string is passed into with a definition that looks like $13_0: function($p0).

What this means is that you have to pass in a DOM element.

 

<script>

	function ShowDialog()
	{
		var htmlElement = document.createElement('p');

		var helloWorldNode = document.createTextNode('Hello world!');
		htmlElement.appendChild(helloWorldNode);

		var options = {
			html: htmlElement,
			autoSize:true,
			allowMaximize:true,
			title: 'Test dialog',
			showClose: true,
		};

		var dialog = SP.UI.ModalDialog.showModalDialog(options);
	}

</script>

<a href="javascript:ShowDialog()">Boo</a>

Do that, and you’ll get your dynamic-html dialog!

…when you show up at the coffee shop in the morning and your regular joe is ready before you get to the front of the line.

Thanks coffee lady! (I go to Nero)

The various Microsoft websites are becoming increasingly frustrating to use.  Why? 

They all try to force me to download Silverlight, their answer to Adobe’s Flash.  Popups and banners everywhere.

 

Why use Silverlight?  Microsoft’s answer >>

Zzzzzzzzzzzzzzzz.  Until sites other than Microsoft.com don’t work without Silverlight, I think I’ll stick with Flash.