How do you disable everything on the screen but a certain part?

R

Ray

Hello,

We have a requirement that when a user click a button to signify he
wants to edit a certain area, everything else on the browser screen but
that area will be disabled. In effect, it's analogous to a modal dialog
box, the difference being the "dialog box" in this case is within the
screen itself, not a separate popup one like a modal dialog box. It's
just a certain area of the screen that becomes enabled when the user
clicks the "Edit" button.

Of course the browser itself is not disabled, so the user can still
type another address and click Go, or click the back button, etc. But
within the page, while editing, the user can't do anything. It'll be
fantastic if we can have a visual indication for this, e.g.: the rest
of the screen gets blurred or something.

Is there a way to achieve this with JavaScript?

Thanks!
Ray
 
I

Ian Collins

Ray said:
Hello,

We have a requirement that when a user click a button to signify he
wants to edit a certain area, everything else on the browser screen but
that area will be disabled. In effect, it's analogous to a modal dialog
box, the difference being the "dialog box" in this case is within the
screen itself, not a separate popup one like a modal dialog box. It's
just a certain area of the screen that becomes enabled when the user
clicks the "Edit" button.
Set the other inputs to readonly.
 
R

Ray

Ian said:
Set the other inputs to readonly.

OK, obviously this is the obvious one, but it won't work for buttons
and other elements. Basically we want something like a modal dialog but
without the popup effect. Any ideas?
 
I

Ian Collins

Ray said:
OK, obviously this is the obvious one, but it won't work for buttons
and other elements. Basically we want something like a modal dialog but
without the popup effect. Any ideas?
Use the disabled attribute?
 
A

ASM

Ray a écrit :
OK, obviously this is the obvious one, but it won't work for buttons
and other elements. Basically we want something like a modal dialog but
without the popup effect. Any ideas?

<button onclick="swither('modalDiag');">help</button>

<div id="modalDiag" style="visibility:hidden">
<p> blah : <input ... >
<p> blah : <input ... >
<p> blah : <input ... >
<p><button onclick="swither('modalDiag');">Cancel</button>
<button onclick="valid();swither('modalDiag');">OK</button>
</div>

function switcher(divId) {
divId = document.getElementById(divId).style;
divId.visibility = divId.visibility=='hidden'? 'visible' : 'hidden';
}



See also :
subModal:
http://www.subimage.com/dhtml/subModal/
TinyBox:
http://alexei.417.ro/node/4
ModalBox:
http://okonet.ru/projects/modalbox/
With a bit of Ajax :
http://jquery.com/demo/thickbox/
 
R

Ray

ASM said:
<button onclick="swither('modalDiag');">help</button>

<div id="modalDiag" style="visibility:hidden">
<p> blah : <input ... >
<p> blah : <input ... >
<p> blah : <input ... >
<p><button onclick="swither('modalDiag');">Cancel</button>
<button onclick="valid();swither('modalDiag');">OK</button>
</div>

function switcher(divId) {
divId = document.getElementById(divId).style;
divId.visibility = divId.visibility=='hidden'? 'visible' : 'hidden';
}



See also :
subModal:
http://www.subimage.com/dhtml/subModal/
TinyBox:
http://alexei.417.ro/node/4
ModalBox:
http://okonet.ru/projects/modalbox/
With a bit of Ajax :
http://jquery.com/demo/thickbox/

THIS is what I'm looking for. Many thanks, Stephane!
 
P

pcx99

Ray said:
Hello,

We have a requirement that when a user click a button to signify he
wants to edit a certain area, everything else on the browser screen but
that area will be disabled. In effect, it's analogous to a modal dialog
box, the difference being the "dialog box" in this case is within the
screen itself, not a separate popup one like a modal dialog box. It's
just a certain area of the screen that becomes enabled when the user
clicks the "Edit" button.

Of course the browser itself is not disabled, so the user can still
type another address and click Go, or click the back button, etc. But
within the page, while editing, the user can't do anything. It'll be
fantastic if we can have a visual indication for this, e.g.: the rest
of the screen gets blurred or something.

Is there a way to achieve this with JavaScript?

Thanks!
Ray


raise the z-index of the active element to ~100

document.getElementById('activeDiv').style.zIndex=100;

activate a division with a z-index of ~50 or so. absolutely position
the division at 0px top, 0px left and stretch this division to be equal
to the offsetHeight and offsetWidth of body. If desired you can shade
the division with filter and opacity to let the user know that the page
proper has been disabled. (This is how Digg display's their on-site
embedded videos).

offsetHeight and offsetWidth are relatively new properties so if you
have to deal with older browsers you might want to find alternatives in
finding the width and height of the current page (I'm sure there's a faq
somewhere or another).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top