javascriptjqueryjqgridjqmodal

JQGRID - JQMODAL: Disable close modal when click on overlay


I am trying to disable close on click when clicking the overlay behind the edit form Modal that opens when I edit a row, but I dont know how I have to do it. I were trying something like:

editOptions: {
    url: 'foo/edit.html',
    mtype: 'PUT',

    //some other options
    closeAfterEdit: true,
    reloadAfterSubmit: true,
    onClose: function() {
        alert('Hi ^_^');
    }
}

But this only triggers if I click at 'X' button. If I click at overlay (out of modal) it closes the modal and that alert never triggers. What I want is to disable that closing function when I click out of modal or remove that overlay.

Thanks.


Solution

  • It's interesting problem. onClose callback will be not called if one clicks on the overlay (if one clicks out of the modal dialog) and the dialog will be closed.

    It's funny, but jqModal.js already has the option which would be perfect to implement your requiremens. It's closeoverlay option of $.fn.jqm (see the line). The problem is that jqGrid don't have any public property which allows to set the option. If you just modify jquery.jqGrid.src.js the closeoverlay : true to closeoverlay : false (it corresponds changing closeoverlay:!0 to closeoverlay:!1 in jquery.jqGrid.min.js) then you will have the behavior which you need.

    The problem is that I don't see any simple way to realize your requirements without modification of the code jqGrid.

    UPDATED: I analysed the code of jqModal.js module one more time and I'v found simple way without changing the source code of jqGrid. The analyse is difficult because the module exist only in minimized form. So it's difficult to read the code.

    The solution: you should include the following line which changes defaults of jqModal.js module:

    $.jqm.params.closeoverlay = false;
    

    Description: the lines of jqModal.js module initialize $.jqm as

    $.jqm = {
        hash: {},
        open: function (s,t) { ... },
        close: function (s) { ... },
        params: {}
    };
    

    So everywhere after you includes jquery.jqGrid.min.js you have $.jqm.params as empty object. It can be used to provide default values of parameters of jqModal.js (which are not directly specified in the list of parameters of $.jqm). So you can include $.jqm.params.closeoverlay = false; somewhere after jquery.jqGrid.min.js (or jquery.jqGrid.src.js) to deny closing of jqGrid dialog on clicking on the overlay.