Make the parent page non editable

Question

i have a parent jsp page in which i do all the manipulation for my retriving data to backend

I have a button in the parent page upon which if i make a click action then it will open a new dialog which contains a table of input fields

I need to make my parent page non editable when this dialog box is opened

Here is my javascript :

function addscenario() {
    $( "#addscenariodiv" ).dialog({ dialogClass: 'no-close' });
    dialog = $("#addscenariodiv").dialog({
        autoOpen : false,
        height : 100,
        width : 700,
        modal : true,
        buttons : {
            close : function() {
                form[0].reset();
                allFields.removeClass("ui-state-error");
            }
        }
    }); 
    dialog.dialog("open");
}

Answer 1

I see, you are already using a modal dialog. There might be few errors in your console. Anyways, I have fiddled a sample here in this link. Hope you can fiddle your solution there too.

<button id="dialogButton" >Open Dialog</button>
<div id="dialog-message" title="Important information" style="display: none;> .... </div>

This is the div which is hidden by default. Clicking on the button the content in the div dialog-message is rendered as the modal dialog.

$("#dialogButton").click(function(){
    $("#dialog-message").show();
    $("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    }
});
});