JavaScript implements modal dialog box source code collection_javascript skills

First, let’s talk about dialog boxes:
Dialog boxes are very commonly used in Windows applications. Many application settings and interactions with users require dialog boxes, so dialog boxes are the most important in Windows applications. One of the interface elements is an important means of interacting with users. The dialog box is a special window, and any operation on the window (such as moving, maximizing, minimizing, etc.) can also be performed in the dialog box.
Dialog boxes can be roughly divided into the following two types:
(1) Modal dialog box: After the modal dialog box pops up, it exclusively occupies system resources. The user can only continue execution after closing the dialog box. Ability to execute code from other parts of the application before closing the dialog box. Modal dialog boxes generally require the user to make some kind of choice.
(2) Non-modal dialog box: After the non-modal dialog box pops up, the program can continue to execute without closing the dialog box, and the user does not need to do anything when transferring to the code in other parts of the application. respond. Modeless dialog boxes are generally used to display information or make some settings in real time.
Modal windows are very common in traditional programming languages. To put it simply, if it is modal, a child window is opened. If the child window is not closed, its parent window cannot be operated, and the original program execution is suspended. , return to the original program and continue until the modal window is closed.
The non-modal one is displayed directly, and then the original program continues to execute the following statements, and other windows are also available.
The modal dialog box monopolizes the user's input. When a modal dialog box is opened, the user can only interact with the dialog box, and other user interface objects cannot receive input information. Most dialog boxes used by applications are modal dialog boxes.
Usually the new window that pops up via windwo.open or a hyperlink in the browser is a non-modal window, while a modal window is a window like alert that must be closed in order to respond to other events.
Understanding the modality and non-modality of dialog boxes, let’s look at the following. In the development of B/s structure applications, sometimes we want the user to open a sub-window that remains in front of the original window after pressing a button.
In IE, we can use the window.showModelessDialog() method to create a non-modal dialog box that displays HTML content. The window.showModalDialog() method is used to create a modal dialog box that displays HTML content. Since it is a dialog box, it does not have all the properties of a window generally opened with window.open().
Here is an instance function of the window.showModalDialog pop-up window:

Example:

It should be noted that showmodaldialog() is not supported in the FireFox browser. This is because in the original MozillaSuite (Firefox is derived from this suite ), supported showmodaldialog(), but later it was discovered that showmodaldialog() had security risks, and support for showmodaldialog() was removed soon after. This happened before bug 194404 was submitted. Until a better solution is found, I believe Firefox will not provide support for showmodaldialog().

To open a pop-up window, you can only use window.open to achieve this function. The syntax of window.open is as follows:
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace ])

It’s just that under Firefox, sFeature has some more function settings in the parameters of window.open. If you want the window opened under FireFox to be the same as IE’s showModalDialog, just add a modal to sFeatures =yes is enough, maybe for security reasons modal=yes, the window opened is not a modal window, the example is as follows:

Since it is not available in firefox showModalDialog method. Then use the following judgment to be compatible with both browsers:

2. JavaScript div implements modal dialog box :

A function similar to the 163 mailbox dialog box. There are mainly two layers to achieve this effect. The first is the layer used to lock the entire page below. To have a transparent effect, you can use filter:alpha(opacity=50). There is also a layer used to display the content of the dialog box, so the zIndex parameter must be set higher than the frequency locking layer.

You can define the CSS of the dialog box yourself. It should be noted that the body in CSS must define margin:0, otherwise, gaps will appear when locking the frequency, resulting in the problem of incomplete frequency locking, and One is the problem with the Select control. In IE, its zIndex is very high, so the frequency locking layer cannot cover it. There are two methods you can use here, one is to hide it, and the other is to disable it. If the attribute is set to false, the second method can only disable editing it, but it will still be fooled by the frequency lock layer, and the effect is not good, so it is better to hide it.