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

Question

I'm trying to open or close a SharePoint Modal Dialog. The dialog opens one time, but it doesn't open in the second time, I just get a weird title only box. Also I cannot figure out how to close the dialog programmatically. Here is my code.

<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>
function openDialog() {
    var e = document.getElementById('d10');
    var options = {
        title: "My Dialog Title",
        width: 400,
        height: 300,
        html: e
    };
    SP.UI.ModalDialog.showModalDialog(options);
}
function closeDialog() {
// HOW DO I CLOSE IT?!
}
</script>

Daniel Stölzner · Accepted Answer · 2016-06-28 15:17:30Z

3

The correct way to close the dialog is to call the close function of the return value of SP.UI.ModalDialog.showModalDialog().

This code will open a dialog and then close it automatically after 2 seconds:

var options = {
    title: "My Dialog Title",
    width: 400,
    height: 300,
    html: e.cloneNode(true)
};

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

setTimeout(function(){
    dialog.close()
},2000)

answered Jun 28, 2016 at 15:17

Daniel Stölzner

2,1171 gold badge15 silver badges17 bronze badges

Add a comment |

John Henckel · Accepted Answer · 2016-06-28 15:40:02Z

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

Stack Exchange Network

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

2 Answers 2

Your Answer

Hot Network Questions

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

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions