How to disable the main page while showing a DIV?

I want to disable the main page while showing a DIV control. For example, One main form having a DataGrid and a Add Item button, while click on the Add Item button, I want to show a DIV control for new item entry, at the same time the main page control should be in disable mode. After close or hide the DIV, then I want to enable the main page. How is this possible? Please guid开发者_JS百科e me.

How is this possible without a third party component?

You can do this by creating a div that falls over the main div and beneath the div you're showing. both the visible divs should have a higher z-index then the main div.

because it has a higher z-index it disables the main div. the dimensions of this disabled div are the same as the main div.

Take a look at this page, here you have a perfect example of how to do it with JQuery and ASP .NET.

http://www.clientsideasp.deynu.com/alerts/Asp-net-jquery-confirm-gridview.aspx

All you should do is change the confirm panel by another inserting one or whatever you want.

Regards

Use jquery modal dialog to achive it:

http://jqueryui.com/demos/dialog/#modal

From your requirement, you can better look into modal form:

http://jqueryui.com/demos/dialog/#modal-form

Not the answer, but a recommendation (#LFMF):

You may want to refresh the main page after closing the modal/DIV - especially if the modal affects the data on it (updates, inserts, deletes).