How to Open/Close a Sharepoint modal dialog using HTML instead of URL

To answer the first question, you MUST either create or clone the DOM element that you pass to the showModalDialog, because MS deletes it when they are done with it (!)

To answer the second, to close a dialog there are two options. You can either simulate a click on the X in the corner of the dialog, or call the close method on the dialog.

For example (using JQuery)

 <button type=button onclick="openDialog()">click me</button> <div id="wrap" style="display:none"> <div id="d10"> my dialog message <button type=button onclick="closeDialog()">OK</button> </div> </div> <script> var mydialog; function openDialog() { var e = document.getElementById('d10'); var options = { title: "My Dialog Title", width: 400, height: 300, html: e.cloneNode(true) // <=== CLONED!! }; mydialog = SP.UI.ModalDialog.showModalDialog(options); } function closeDialog() { // EITHER METHOD 1 $('.ms-dlgCloseBtnImg').trigger('click'); // OR METHOD 2 mydialog.close(); } </script> 

This works for me, but it might not be the best way.

EDIT: changed to use close() per Daniel Stölzner