How to Show and Hide a Modal Pop up Dialog in a SharePoint 2013 Page or a Visual WebPart

In this article we can see how to Show and Hide a Modal Pop up Dialog from a SharePoint 2013 Page or Visual WebPart. Source code for the complete Popup related articles can be downloaded from the bottom of this article

To create a new Modal or Popup dialog follow the below steps. The scenario for this sample is to use a Visual WebPart to Show a new page in Popup

1. Add the below script in a Visual WebPart (ascx file).

 <script type="text/javascript">
     //******** Basic Dialog Starts Here ***********/
     function openBasicDialog(tUrl, tTitle) {
         var options = {
             url: tUrl,
             title: tTitle
         };
         SP.UI.ModalDialog.showModalDialog(options);
     }
     //******** Basic Dialog Ends Here ***********/
 </script>

The above code is a basic implementation of a Popup. It accepts a URL and Title as input. The page URL passed to this function is shown in Popup. The title of the Popup will be replaced with the title which is passed as input parameter for this function

2. To invoke the Popup place the below script in the .ascx file.

 <a href="#" onclick="openBasicDialog('PopUp.aspx','Basic PopUp');">Show Modal Dialog</a>

3. To hide a popup, the below HTML snippet in the Popup page can be placed

To notify the base page, that “OK” has been clicked use the below code

 <input id="btnClientOk1" type="button" value="OK from PopUp" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK)" />

OR , you can use the bellow option

 <input id="btnCommit" type="button" value="Close" onclick="window.frameElement.commitPopup();" />

To notify the base page, that “cancel” has been clicked use the below code

 <input id="btnCancel" type="button" value="Close" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel)" />