How to display HTML Content using window.showModalDialog()

Question

Will I be able to display a HTML content (not a file) in a pop up window using JS?

I am trying to open a pop up window and display an user defined HTML inside this. I am trying the below, but it doesn't work.

window.showModalDialog("<p>Pop up window text</p>","resizable: yes");

Can some one suggest me how to do this? Thanks in advance.

Solution

Contrary to window.open(), the first (URL) argument of showModalDialog() is required. Thus, you can't pass it an HTML string. You can either use window.open:

var newWindow = window.open("", "newWindow", "resizable=yes");
newWindow.document.write('<p>Pop up window text</p>');

Or alternatively, use one the existing modal plugins, such as jQuery UI Dialog or Twitter Bootstrap Modals. They allow you to easily display a modal window based on the content of an existing HTML element, e.g.:

<div id="dialog">
  <p>Pop up window text</p>
</div>

$('#dialog').modal(); // Twitter Bootstrap
$("#dialog").dialog({ resizable: true }); // jQuery UI