I have created a modal dialog in SharePoint with the elements.xml. I use a SharePoint Hosted app. This is my CustomAction Definition:

 <CustomAction Id="2c2b7036-4582-4238-8205-b348628c0ed9.OpenMediaDatabase"
            Title="Medien einfügen"> ... 

Now I added a "Close"-button to the Dialog:

<input type="button" class="btn btn-default" data-dismiss="modal" value="Abbrechen" onclick="closeDialog()" />

And added this code for closing:

function closeDialog() {
    var modalDialog = SP.UI.ModalDialog;
    modalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Cancelled');

But I get the error that SP.UI.ModalDialog is not defined.

I added this references to my app:

<!-- SharePoint specific references -->
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

    <script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="_layouts/15/sp.js"></script>
    <script type="text/javascript" src="_layouts/15/sp.ui.dialog.js"></script>

Do I have to to something else to get this code working?


I stepped through with the debugger and the method seems to be defined, but I still get this strange error:

Debugging the close method


I forgot this Information: I am using SharePoint Online.


2 Answers 2


SP.UI lives on another file, that is sp.ui.dialog.js

You need to add it to the script references

<script type="text/javascript" src="_layouts/15/sp.ui.dialog.js"></script>
  • Thank you for your advice. I added a reference to the sp.ui.dialog.js but it only changed the error message. Now it says the method "commonModalDialogClose" is undefined. I see the script file in Internet Explorer Debugging Tools so it seems to be available. Apr 17, 2015 at 9:21
  • Can you open up the developer console and try this command SP.UI.ModalDialog.commonModalDialogClose and see what you get ? this is what you should see picpaste.com/Clipboard02.jpg
    – MdMazzotti
    Apr 17, 2015 at 9:40
  • I get this: picpaste.com/g4ZoqJ66.JPG Apr 17, 2015 at 10:11
  • ok, so the function is defined... can you show us your full code?
    – MdMazzotti
    Apr 17, 2015 at 10:16
  • If I add execute this without parameters in the dev console, the dialog fades out but it does not work from the app Apr 17, 2015 at 10:27

run this to check if it is a pop-up or iframe

    if (window.opener) {
        //alert('inside a pop-up window or target=_blank window');       
    } else if (window.top !== window.self) {
       //inside an iframe}

If this is an iframe try this to close the window:

<a href="#" onclick="window.frameElement.cancelPopUp(); return false;">Close Dialog </a>
<a href="#" onclick="window.frameElement.commitPopup(); return false;">OK </a>');

good article about this

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.