How to create a "dialog box" by a layer(div) ?

[Cylix]

For example,
There is a article on a simple html, a button is place on the bottom of
the article.
When the button is onclick, a table is shown on the top of page, and
all the text,
or any form controls at the background cannot be foucs, or select
anymore.
It just like all the things at backgound is diabled and viewing gray.

 

[Matt Kruse]

For example,
There is a article on a simple html, a button is place on the bottom
of the article.
When the button is onclick, a table is shown on the top of page, and
all the text,
or any form controls at the background cannot be foucs, or select
anymore.
It just like all the things at backgound is diabled and viewing gray.

There are a few different libs which do this. Yahoo's library, for example.

I have example code which I am preparing to release which makes these "in
page" popups easy to create:
http://www.javascripttoolbox.com/lib/popup/example.php

This is a pre-release example, and the "Modal Popups" at the bottom are
similar to what you describe.

Note: The code in the example has been updated to fix bugs and add
enhancements since it was posted. The example is not production-ready code.

 

[Cylix]

I also know this effect is provided in many javascript "toolkit",
May I know the way of the concept to do so?

 

[Laurent Bugnion]

Hi Matt,

Matt Kruse wrote:

This is a pre-release example, and the "Modal Popups" at the bottom are
similar to what you describe.

Note: The code in the example has been updated to fix bugs and add
enhancements since it was posted. The example is not production-ready code.

I like the semi-transparent layer. Looks really good. However, I noticed
that, while it blocks the mouse inputs to the main document, it doesn't
prevent me from using the keyboard to select a link and "click" it by
pressing enter (tested in Firefox 1.5.0.5). Any idea how to solve this?

Greetings,
Laurent

 

[Matt Kruse]

I like the semi-transparent layer. Looks really good. However, I
noticed that, while it blocks the mouse inputs to the main document,
it doesn't prevent me from using the keyboard to select a link and
"click" it by pressing enter (tested in Firefox 1.5.0.5). Any idea
how to solve this?

I've thought about this too, especially when the popup has a form and you
tab out of it into the main document.

I considered adding keyboard event-handlers to block that on the main
document, but decided that it's probably not worth it. If someone wants to
try that bad to thwart the "modal" popup, then they could also type in
arbitrary javascript: into the url to un-modal it anyway