http://msdn.microsoft.com/en-us/library/ff410058.aspx says that you can use the option html to display html text in a modal.

I have a string like this;

var html = '<div><strong>Test</strong> test</div>';

Passing this in as the html option causes the error:

Microsoft JScript runtime error: Object doesn't support property or method 'getElementsByTagName'

So you can't pass a string into the html element. How can I convert my string into a format that the html option likes?

The string is being dynamically created on the sever and is being retrived via a WCF REST web service

  • Is it possible to use BOTH url and HTML? For instance, I want to get the Attach File dialogue but I also want to load some custom HTML to the modal since in my own modal I can't get the Attach File content to ONLY display what the modal displays...
    – MattE
    Oct 27, 2017 at 18:35

5 Answers 5


May not be the best wat but it works:

var test = "<div id='correspondence'>" + result + "</div>";

    html: document.getElementById('correspondence'),
    title: "Correspondence",
    allowMaximize: false,
    showClose: true,
    autoSize: true
  • 18
    Exactly. There is a mistake in msdn, and they are not even going to fix it. html is not a string, this is a DOM element. You can find evidence in comments to msdn article. Now I always read comments in msdn :). Jan 20, 2012 at 12:16
  • 5
    Very important! If you want to make a non-trivial dialog (e.g form inputs) you may be tempted to define it in your html and reference it by id. This works one time only because a side-effect of showModalDialog deletes the DOM element! (such clever programmers at ms). If you want to open your dialog more than once, you must either create the element in code, or clone an existing element from the DOM. But beware because cloning will cause duplicate ids. Jun 28, 2016 at 14:15
  • What if I want to add SP datepicker in the modal?
    – Harsh
    Jun 26, 2018 at 5:08

Here's a better way than the code from John by using plain JavaScript (no need for jQuery) and without adding the element to the body manually:

var element = document.createElement('div');
element.innerHTML = 'Hello World, I am the dialog content';

    html: element,
    title: 'My Dialog Title',
    allowMaximize: false,
    showClose: true,
    autoSize: true

The html option takes a DOM element rather than a string because of which you get this error. Try something like this:

var htmlElement = document.createElement('p');
var messageNode = document.createTextNode('Message');
var options = {
    html: htmlElement,
    autoSize: true,
    allowMaximize: true,
    title: 'Title',
    showClose: true,
var dialog = SP.UI.ModalDialog.showModalDialog(options);

The above code snippet has been taken from here.

  • What if I want to add one SP datepicker in the modal?
    – Harsh
    Jun 26, 2018 at 5:09
  • @Harsh Not sure. You shoukd ask a separate question for that.
    – Naveen
    Jun 26, 2018 at 5:31

As shortcut you can use sg like:

SP.UI.ModalDialog.showModalDialog( { html : $( "<h1>asdf</h1>" ).get( 0 ) } );

NOTE: if you have more than one tag you need to wrap everything into an embracing one otherwise only the first is shown:

$( "<div><h1>asdf</h1><p>jkl;</p></div>" ).get( 0 )

  • Only problem with this is that it creates a long heighten modal dialog
    – nbi
    Nov 28, 2017 at 10:35

Here is a full example using jQuery : http://www.wawawum.com/blog/post/SharePoint-Modal-Dialog-from-HTML.aspx


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.