Ajax design pattern-Lightbox

The word Lightbox is really difficult to translate, And it barely solves it as a "Lantern ".

The Lightbox effect is similar to the logout/shutdown dialog box of the WinXP operating system. In addition to the dialog box at the center of the screen, other areas are gradually dimmed to increase the contrast, in this case, except for the Form Control in the dialog box, no other area can obtain the focus.

Lightbox is equivalent to the "Modal Dialog" that was previously supported only in IE; now window. open (url, name ,"Modal = yes");

To achieve the same effect. Use "Modal Dialog" to restrict user operations in the pop-up Dialog box, and close the operation only after the set operation is completed. In some logic-sensitive applications, force the user's attention to prevent the user's misoperation from causing Program Logic disorder.

In fact, Lightbox is not new. before Ajax was born the year before, it appeared with the name "Inline Popup. The reason is that the pop-up window shielding technology has been adopted by browsers, and there is no uniformPopupSolution. At that time, I still remember some reports that "Inline Popup" cracked the pop-up window blocking.

"Inline Popup" has not been noticed by many people, but I still find that the 163 mailbox in China was widely used in the last revision. When Ajax is justified, "Inline Popup" is re-reproduced and changed to a beautiful name "Lightbox ".

This year, Lightbox JS was first used by its author Lokesh Dhakar to zoom in and display images on the current page. It uses CSS to define image containers, use a translucent png Image to achieve a dark gradient. Ease of use:

1. Load lightbox. js

2. Add a rel = "lightbox" attribute to the image link. For example:

image #1

Inspired by Lightbox, Chris Campbell thought and decided to make Lightbox Gone Wild !. He introduced Prototype1.4.0, used with the class attribute of CSS and HTML tags to re-implement the Lightbox effect, and expanded the simple function of LightBox to overwrite and display images, this allows you to dynamically load forms using the popular asynchronous Updator technology. You can try his demo. However, it seems that his implementation has some bugs, because the demo will cause 100% CPU usage in both FireFox1.5 and IE7beta2.

AlwaysBETA soon launched its own improvement solution. He didn't add new features, but introduced the mini effect class library Moo. FX to make Lightbox more beautiful and easier to customize.

When I used WinXP for the first time, I was amazed by the dark gradient during shutdown. Use Lightbox to guide the user's attention to complete preset operations, with a good contrast effect to create a gentle visual atmosphere. It is believed that Lightbox will become one of the Ajax Design Patterns in the Web applications with the current interactive interface approaching the desktop.

At this point, I found that the translation of "Lightbox" into "Lantern" does not seem to be so far-fetched in terms of its functions and effects.

(