How To Close A Modal In Sharepoint 2013

Closing a modal dialog in Sharepoint 2013 is a simple process that can be achieved through the use of JavaScript. By utilizing the SP.UI.ModalDialog.commonModalDialogClose method, you can easily close the dialog and pass a DialogResult and a return value to the dialogReturnValueCallback function.

When it comes to opening a modal dialog, the SP.UI.ModalDialog.showModalDialog method is your go-to solution. This method allows you to specify various options such as the title, width, height, and other properties of the dialog, providing you with flexibility in customizing the dialog to suit your needs.

To enhance the user experience, you can create a close button within the modal dialog using the OpenDocTopicPopup function. This function sets up the dialog options and utilizes the SP.UI.ModalDialog.showModalDialog method to open the dialog. Inside the dialog, you can have the close button, which upon clicking, will call the SP.UI.ModalDialog.commonModalDialogClose method to gracefully close the dialog.

Additionally, you can further improve the user-friendliness of the modal dialog by adding a listener for the escape key. This listener, when triggered by the escape key, can invoke the SP.UI.ModalDialog.commonModalDialogClose method to allow users to conveniently close the dialog without needing to use the close button.

By following this approach, you can easily manage the opening and closing of modal dialogs in Sharepoint 2013 using JavaScript, providing a seamless and interactive experience for your users.

Using the SP.UI.ModalDialog.commonModalDialogClose method

The SP.UI.ModalDialog.commonModalDialogClose method is a powerful tool for closing modal dialogs in SharePoint 2013 and passing necessary information back to the originating function. This method allows you to close the dialog and pass a DialogResult and a return value to the dialogReturnValueCallback function. By utilizing this method, you can effectively manage the closing process of modal dialogs within your SharePoint environment.

When using the SP.UI.ModalDialog.commonModalDialogClose method, you can ensure that any changes or selections made within the modal dialog are captured and returned to the calling function. This allows for seamless integration between the dialog and the rest of your SharePoint solution.

By following a simple syntax, you can incorporate the SP.UI.ModalDialog.commonModalDialogClose method into your JavaScript code, making it easy to handle the closing of modal dialogs in SharePoint 2013. Combined with the SP.UI.ModalDialog.showModalDialog method for opening the dialog, you can create a complete and user-friendly interactive experience within your SharePoint environment.

As you implement the SP.UI.ModalDialog.commonModalDialogClose method, consider enhancing the user experience by including a close button within the modal dialog itself. This can be achieved using the OpenDocTopicPopup function, which sets up the options for the dialog and utilizes the SP.UI.ModalDialog.showModalDialog method to open the dialog. Inside the dialog, you can include a close button that calls the SP.UI.ModalDialog.commonModalDialogClose method to close the dialog and return control to the calling function.

Summary:

  1. The SP.UI.ModalDialog.commonModalDialogClose method is a powerful tool for closing modal dialogs in SharePoint 2013 and passing necessary information back to the originating function.
  2. By utilizing this method, you can effectively manage the closing process of modal dialogs within your SharePoint environment.
  3. Using the SP.UI.ModalDialog.commonModalDialogClose method, you can ensure that any changes or selections made within the modal dialog are captured and returned to the calling function.
  4. By incorporating a close button within the modal dialog and adding a listener for the escape key, you can enhance the user-friendliness of your SharePoint solution.
Methods for Closing Modal Dialogs in SharePoint 2013
Method Description
SP.UI.ModalDialog.commonModalDialogClose A powerful method for closing modal dialogs and passing necessary information back to the originating function.
SP.UI.ModalDialog.showModalDialog A method for opening modal dialogs in SharePoint 2013 and specifying various options such as title, width, and height of the dialog.

Opening a modal dialog with SP.UI.ModalDialog.showModalDialog method

To open a modal dialog in Sharepoint 2013, the SP.UI.ModalDialog.showModalDialog method provides the necessary functionality and flexibility to customize the dialog’s appearance and behavior. This method takes options as a parameter, allowing you to specify various properties of the dialog such as the title, width, height, and more.

By using the SP.UI.ModalDialog.showModalDialog method, you can create a user-friendly and interactive experience for your users when working with modal dialogs in Sharepoint 2013.
For example, you can specify a custom title that accurately describes the purpose of the dialog, ensuring clarity and ease of use. Additionally, you can set the dimensions of the dialog, ensuring it is displayed at the desired size for optimal viewing and interaction.

Furthermore, the SP.UI.ModalDialog.showModalDialog method allows you to add additional functionality to the dialog through the use of callback functions. These functions can be used to perform specific actions based on user input or to capture and process data entered within the dialog. This level of customization ensures that the dialog meets the specific requirements and objectives of your Sharepoint 2013 application.

Example of using SP.UI.ModalDialog.showModalDialog method:

var options = {

title: “Add New Item”,

width: 600,

height: 400,

url: “/sites/sitecollection/lists/MyList/NewForm.aspx”,

dialogReturnValueCallback: function(result, returnValue) {

// Perform actions based on the dialog result and return value

}

}

SP.UI.ModalDialog.showModalDialog(options);

With the above example, you can see how the SP.UI.ModalDialog.showModalDialog method is used to open a modal dialog with specific properties. The dialog is rendered with the title “Add New Item” and dimensions of 600 pixels in width and 400 pixels in height. The dialog content is sourced from the specified URL, in this case, the NewForm.aspx page of a custom Sharepoint list. The dialogReturnValueCallback function is also defined, allowing you to perform actions based on the dialog result and return value.

In summary, the SP.UI.ModalDialog.showModalDialog method is a powerful tool for opening modal dialogs in Sharepoint 2013. It provides the necessary flexibility to customize the appearance and behavior of the dialog, allowing you to deliver an enhanced user experience within your Sharepoint application.

Enhancing the close button and adding escape key functionality

By leveraging the OpenDocTopicPopup function and incorporating escape key functionality, you can enhance the user experience and provide more intuitive ways to close modal dialogs in Sharepoint 2013.

To create a close button within the modal dialog, you can utilize the OpenDocTopicPopup function. This function allows you to set up the necessary options for the dialog and utilizes the SP.UI.ModalDialog.showModalDialog method to open the dialog. Inside the dialog, you can include a close button that calls the SP.UI.ModalDialog.commonModalDialogClose method to close the dialog.

In addition to the close button, you can further improve the user-friendliness of the modal dialog by adding a listener for the escape key. This listener will detect when the escape key is pressed and automatically call the SP.UI.ModalDialog.commonModalDialogClose method to close the dialog. This provides users with an alternative and more intuitive way to close the dialog.

By implementing these enhancements, you can create a more user-friendly experience for closing modal dialogs in Sharepoint 2013. This approach leverages the OpenDocTopicPopup function, the SP.UI.ModalDialog.showModalDialog method, and the SP.UI.ModalDialog.commonModalDialogClose method to easily open and close dialogs using JavaScript.

Meet the Author

Abdul Rahim has been working in Information Technology for over two decades. Learn how Abdul got his start as a Tech Blogger , and why he decided to start this Software blog. If you want to send Abdul a quick message, then visit his contact page here.