How to block a panel's contents but not block the entire page

Question

hi. i have a requirement where I have 2 panels. The first panel is having some content. The Second panel is having some content

but here I need to block the Panel1. This means I want even panel1 to appear but it should be blocked like things means when user clicks on any button in panel1 Nothing should happen inside the panel1. It should not be allowed. It's something like make the panel 1 visible but blocking all the contents inside the Panel1 blocked like things. but any Functionality in panel 2 content should work. like clicking on the textbox, button click,

the 2 panels appear like this

panel1: --> contents of this should be blocked, but visible

panel2:--> you can make any changes you need

hope my Question is Clear

any help would be Great Thank You

Answer 1

Give a look to the BlockUI jQuery plugin, check the Element Blocking demo.

Answer 2

Use the technique used by many Lightbox and Modal Dialog plugins: put a semi-transparent div over the top of the area you want to make "disabled". In the case of those plugins, they make it cover the entire page, but in your situation, just position it at the same position as the panel, giving it the same width and height.