Overriding the SharePoint Modal Dialog Close Button

The close button in a SharePoint modal dialog is built into SP.UI.ModalDialog and simply closes the dialog. However, we would like to run some backend code before the dialog closes.  Attempts to use the $clearHandlers and $removeHandler SharePoint functions to remove the original click handler have failed.


1. Create an ASP.NET Button control and hide it with css:

[html light=”true” wraplines=”true”]
CssClass=”hidden” />

[css light=”true”]
.hidden {
display: none;

2. Add a backend click event handler containing the code we want to run before the dialog closes, as well as code to close the dialog afterwards:

btnClose.Click += this.BeforeClose;

protected void BeforeClose(object sender, EventArgse )
// stuff to do before close

// close the dialog
var script = string.Format(“window.frameElement.commonModalDialogClose({0}, ‘{1}’);”, 0, “Cancelled the dialog”);

this.Page.Response.Write(“<script type=\”text/javascript\”>” + script + “</script>”);

3. Using JavaScript, remove the original SharePoint close button, create a new one using the same HTML, then add a click event listener which triggers a click on the ASP.NET Button control:

jQuery(document).ready(function() {
// find the newly created ASP.NET Button
var aspCloseButton = jQuery(‘input[id*=”btnClose”]’);

// find the SharePoint dialog button container
var spButtons = jQuery(‘.ms-dlgTitleBtns’, window.parent.document);

// find the SharePoint dialog close button and remove it

// append a new close button
spButtons.append(‘<a accesskey=”C” class=”ms-dlgCloseBtn” title=”Close dialog”>’ +
‘<span style=”padding: 8px; height: 16px; width: 16px; display: inline-block;”>’ +
‘<span class=”s4-clust” style=”height: 16px; width: 16px; position: relative; display: inline-block; overflow: hidden;”>’ +
‘<img class=”ms-dlgCloseBtnImg” style=”left: -0px !important; top: -645px !important; position: absolute;” alt=”Close dialog” src=”/_layouts/15/images/fgimg.png” />’ +

// add a click event handler to the new close button
spButtons.find(‘a.ms-dlgCloseBtn’).on(‘click’, function() {
if (aspCloseButton.length)
// trigger a click on the ASP.NET button
// failsafe if the ASP.NET button is not found
window.frameElement.commonModalDialogClose(0, ‘Cancelled the dialog’);

Related posts

The Future of SharePoint

Embracing the AI Era for Enhanced Collaboration and Creativity In our rapidly evolving digital landscape, harnessing the power of AI and smart technology to

Read More »
Ready to talk about building your

Modern Workplace?