How to close SP.UI.ModalDialog using the click button in sharepoint?

Question

I want to show a confirmation dialog when the user saves any document from EDITForm.aspx. So I wrote the following JavaScript code.

function PreSaveAction() { var _html = document.createElement(); _html.innerHTML = " <input type=\"button\" value=\"Submit\" onclick ='javascript:SubmitDlg();' /> <input type=\"button\" value=\"Cancel\" onclick =\"javascript:CloseDlg();\" /> </td> </tr> </tbody> </table>"; var options = { title: "Confirm", width: 400, height: 200, showClose: false, allowMaximize: false, autoSize: false, html: _html }; SP.UI.ModalDialog.showModalDialog(options); } function SubmitDlg() { SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK); } function CloseDlg() { SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel); } 

Now I have the following queries.

• SubmitDlg and CloseDlg do not start when clicking on Submit or Cancel.
• Is this the right way to submit a form (SubmitDlg method) and cancel the dialog (CloseDlg method) from a modal dialog?
• Also, this modal dialog box should appear only if there are no validation errors when saving the record, means that if any field value is required, and we have not added any value, then it should display embedded messages in red.

thanks

Answer 1

in the parameters of the modal dialog you need to pass a link to your callback function as follows:

 var opt = SP.UI.$create_DialogOptions(); opt.width = 500; opt.height = 200; opt.url = url; opt.dialogReturnValueCallback = MyDialogClosed; SP.UI.ModalDialog.showModalDialog(opt); 

Then in your callback function you can check the status:

 function MyDialogClosed(result, value) { if (result == SP.UI.DialogResult.Cancel) { //Cancel. Do whatever } else { //SP.UI.DialogResult.OK //User clicked OK. You can pickup whatever was sent back in 'value' } 

}

If you need to send material back from your dialogue, you can use this:

 function okClicked() { SP.UI.ModalDialog.commonModalDialogClose(1, someobject); } 

To do this, you need to connect the function to the OK button in the server-side code, using something like this:

 protected override void OnLoad(EventArgs e) { if (Master is DialogMaster) { var dm = Master as DialogMaster; if(dm != null) dm.OkButton.Attributes.Add(@"onclick", @"return okClicked();"); } base.OnLoad(e); } 

Answer 2

add the class "CloseSPPopUp" to btn u want to click to close

Add this Script to the page that has the "CloseSPPopUp" btn

 $('.CloseSPPopUp').click(function(){ window.top.CloseSPUIPopoup(); }); $('.CloseSPPopUp').click(function(){ window.top.CloseSPUIPopoup(); }); 

Now on the main page where you call the popup

 function CloseSPUIPopoup{ $(".ms-dlgContent").hide(); } 

Reason: The ms-dlgContent class is on the parent page and CloseSPPopUp is in the Iframe, which is created at runtime