Modal popup disappears

Question

I have created a button and on the click of that button a JavaScript code gets triggered. I have given the link of a list of SharePoint that gets opened as a modal dialog box on the click of that button. I am facing a problem in opening that modal popup. Whenever I click on the button the modal popup opens but only for a fractions of seconds and then gets closed automatically.

Please suggest a way to display that modal dialog box.

Answer 1

When you have used Asp:Button, it is doing postback. Hence the opened dialog model is closed. You can avoid the postback event by adding "return false" after the method call in the OnClientClick event. It worked fine for me.

<asp:Button ID="btnJustify" runat="server" Text="Justify" OnClientClick="Justify();return false" />

In order to update the details through modal, the item Id needs to be passed. Seems you are not passing the Id parameter in your code. Below code snippet works for your scenario.

<script type="text/javascript">
    function Justify() { var options = SP.UI.$create_DialogOptions(); options.width = 500; options.height = 500; 
    options.url = "/sites/SAMS/Lists/DownloadJustify/EditForm.aspx?ID=1"; options.dialogReturnValueCallback = Function.createDelegate(null, dialogReturnValueCallback); options.showClose = true; SP.UI.ModalDialog.showModalDialog(options); }
    function dialogReturnValueCallback(res, retVal) {
        if (res === SP.UI.DialogResult.OK) {
            alert('success');
        }
        else {
            alert('failed');
        }
    }
</script>

Hope this helps to resolve your issue.

Answer 2

Solution1: SP.UI.ModalDialog class from javascript and use _spBodyOnLoadFunctionNames to call it on Page Load

        <script language="javascript" type='text/javascript'>
    function openModelDialogPopup(strPageURL ) {

    var dialogOptions = {
        title: "This is Modal Dialog", //Popup title.
        url: strPageURL, 
        width: 600, // Width of the dialog.
        height: 400
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', dialogOptions);
    return false;
}      
    </script>