UserControl 阻止/隐藏/覆盖页面上的所有其他控件

Question

Say I've made a user control. I want it to have following behavior:

1. When its Visible property is true , users can only operate things inside it, but not anything outside of it, ie any other control in its containing user controls (if any) and the page is not accessible to users. (Even better if they'd also be invisible to users.)
2. The above effect lasts between postbacks, until its Visible is changed to false . When that happens, this user control is invisible to users, and stuff outside it are back to their normal state.

How can this be achieved?

Answer 1

One nice way would be to say have the UC in a div. You then pop the div with a dialog (jquery.UI dialog). When such a dialog is display, then the screen background goes gray, and only the control is visible. And if you click/use any button in that control that causes a page post-back, then it will collapse, disappear, and the page is back to normal with user being able to use.

The effect looks like this:

here is a GV to edit data. When I hit edit button, I display my UC (to edit the one row).

So, this grid:

so, this is a round about way to acheive your goal. By popping a div (with the UC inside), then we solue the "UI" for the user, focus for user in/on/looking at the pop dialog, and better yet, the whole screen background goes gray, and the user cannot select/use/click on any control on the page.

The above idea might not work for you, but if it can be adopted, then all of your messay code and handstands to disable the rest of the page is automatic done for you.

As noted, we all quite much have jQuery installed. You have to add jQuery.UI.

the code to pop the above dialog is thus then this:

   <script>
       function popedit() {

            MyPWidth = "62em"
            MyWidth = $(window).width()

            if (MyWidth < 840) {
                MyPWidth = (MyWidth - 25)  + 'px'
            }

            var myDialog = $("#EditRecord");
            myDialog.dialog({
                title: "Edit Hotel",
                width: MyPWidth,
                modal: true,
                appendTo: "form",
                dialogClass : "dialogWithDropShadow",
                close: myclose
            });
       }

So, above pops the "div" called EditRecord, and it does the rest for you.

Answer 2

It turned out to be actually pretty easy:

Lay a <div class="overlay"></div> as the topmost element inside the user control, enclosing any other elements and child controls. And define a .overlay class in the site CSS stylesheet as something like this:

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow: auto;