Use the pop-up window in the browser

In web development, a pop-up window is often used to distribute the information on the home page, which makes user operations more concise and clear and enhances user experience, however, when using the browser pop-up window, you should consider the compatibility of various browser support methods for the pop-up mode, such as window. the showmodaldialog method can only be supported by IE, so Firefox users cannot see the pop-up browser window. This article attempts to use multiple pop-up windows on the client. Each method is tested in IE and ff. The following describes different implementation methods one by one:

Method 1: use the window. open () method

Although window. the showmodaldialog () method is unique to IE, But windows. the open () method is supported by both IE and ff. Therefore, we consider using this method to implement the pop-up window. First, let's take a look at the function prototype of this method:

Onewwindow = Window. Open ([Surl] [, sname] [, sfeatures] [, breplace])

Surl is the path of the page to be opened, and sname is the name of the form or framework to open the new page (_ blank, _ parent, _ Self, etc., or the framework name in the framework set) string, sfeature is a string that describes the properties of the pop-up window. You can set various properties of the pop-up window, including whether there is a menu bar, whether there is a toolbar, status bar, etc, the format of this string is "property name = value, property name = value" (for details about sfeature, refer to the following introduction ), when breplace is true, it indicates that a new record is added to the browser history in the pop-up window. If it is false, it is not added.

The optional attributes and values of sfeature are listed as follows:

Channelmode = {Yes | no | 1 | 0}	Specifies whether to display the window in theater mode and show the channel Band. The default isNo.
Directories = {Yes | no | 1 | 0}	Specifies whether to add directory buttons. The default is Yes.
Fullscreen = {Yes | no | 1 | 0}	Specifies whether to display the browser in full-screen mode. The default is No. Use full-screen mode carefully. Because this mode hides the browser's Title Bar and menus, you shoshould always provide a button or other visual clue Help the user close the window.Alt + F4Closes the new window. A window in Full-screen mode must also be in theater mode (channelmode ).
Height = Number	Specifies the height of the window, in pixels. The minimum value is 100.
Left = Number	Specifies the left position, in pixels. This value is relative to Upper-left corner of the screen. The value must be greater than or equal to 0.
Location = {Yes | no | 1 | 0}	Specifies whether to display the input field for entering URLs directly The browser. The default isYes.
Menubar = {Yes | no | 1 | 0}	Specifies whether to display the menu bar. The default is Yes.
Resizable = {Yes | no | 1 | 0}	Specifies whether to display resize handles at the corners of the window. The default isYes.
Scrollbars = {Yes | no | 1 | 0}	Specifies whether to display horizontal and vertical scroll bars. Default isYes.
Status = {Yes | no | 1 | 0}	Specifies whether to add a status bar at the bottom of the window. Default isYes.
Titlebar = {Yes | no | 1 | 0}	Specifies whether to display a title bar for the window. This parameter is Ignored unless the calling application is an HTML application or Trusted dialog box. The default isYes.
Toolbar = {Yes | no | 1 | 0}	Specifies whether to display the browser toolbar, making buttons such Back,Forward, AndStopAvailable. The default is Yes.
Top = Number	Specifies the top position, in pixels. This value is relative to Upper-left corner of the screen. The value must be greater than or equal to 0.
Width = Number	Sets the width of the window, in pixels. The minimum value is 100.

With the above reference, We can pop up a window we hope. The sample code is as follows:

Function fnpopup (){
VaR ref = open ('dialog1. aspx ', null, 'directories = Yes, Height = 240px, width = 320px, menubar = No, toolbar = no ');
}

Here, ref returns a reference to the pop-up window. In the parent window, we can operate the objects in the pop-up window according to ref, just like the window objects in the pop-up window. What we need to solve now is how to implement the interaction between the pop-up window and the parent window. First, you must understand how to obtain the reference of the parent window. By trying, we can find that the window of the subwindow is used in this method. the object obtained by parent is not the parent window, but the child window itself. The correct way to obtain the parent window in the pop-up window is to use window. opener attribute. After obtaining the reference of the parent window, we can implement interaction between the two windows. The following sample code passes the uinput value of the pop-up window to the uinput of the parent window, and closes the pop-up window.

Function fnclosewin (){
Opener.doc ument. getelementbyid ('uinput'). value = Document. getelementbyid ('uinput'). value;
Window. Close ();
}

Now we have implemented the simplest interaction between the two windows. Now let's bring up the pop-up window, enter some content in the text box, and then trigger the pop-up window again. A new window is not displayed, however, we can see that the content we entered in the pop-up window has been cleared (the pop-up window is actually reloaded once, but only in the same window ), we use the pop-up window reference we just mentioned to solve this problem: when the pop-up window is displayed, save the reference of the pop-up window and clear the value when the pop-up window is closed, then we can know whether a window has been opened. Based on this idea, we add the following changes in the above Code:

VaR ref = NULL;
// Code for triggering the pop-up window
Function fnpopup (){
If (ref = NULL)
// Save the form reference in the pop-up window
Ref = open ('dialog1. aspx ', null, 'directories = Yes, Height = 240px, width = 320px, menubar = No, toolbar = no ');
}

// Processing logic in the pop-up window
Function fnclosewin (){
Opener.doc ument. getelementbyid ('uinput'). value = Document. getelementbyid ('uinput'). value;
// Modify the flag of the parent window
Opener. ref = NULL;
Window. Close ();
}

In this way, we can solve the problem described above.

Method 2: Use IFRAME

In addition to the actual pop-up window, you can also use the display attribute of a div to simulate the operation of a pop-up window. Here, we use the IFRAME method in the div, it mainly takes into account that the pop-up window content can be loaded as needed to reduce the data volume of the main window. You must also consider how to save the last selected status when you open the selection box again after you finish the selection: for example, if the user selects both AB from the A-E5 options in the pop-up window, when opening again, ensure that both AB are selected. First, let's look at the implementation of the pop-up window. The HTML code and script are as follows:

Html

<Div id = "popup" style = "border: 1px solid #606060; width: 320px; Height: 240px; display: none;">
<IFRAME id = "myframe" src = "" style = "width: 100%; Height: 100%;"> </iframe>
</Div>

Note that the src attribute of IFRAME is left blank (in fact, the default value is about: blank), and the display attribute is none. When the pop-up window is not opened, IFRAME has no page and DIV is invisible.

Javascript

Function fnpopup (){
Document. getelementbyid ('popup'). style. Display = 'block ';
Window. Frames [0]. Location. href = "dialog1.aspx ";
}

Here the frames object of window is used. This object gets the frame or IFRAME defined in the current page. The current page only has one IFRAME, so the window is used directly. frames [0] gets a reference to IFRAME by setting location. the href attribute opens the expected pop-up window in IFRAME and sets Div visibility. The pop-up window is displayed to the user.

In the virtual pop-up window of IFRAME, you can use window. Parent to interact with the parent window. The code for interaction in the pop-up window is as follows:

Function fnclosewin (){
Parent.doc ument. getelementbyid ('uinput'). value = Document. getelementbyid ('uinput'). value;
Parent.doc ument. getelementbyid ('popup'). style. Display = 'none ';

}

After the interaction, hide the DIV and close it in the simulated pop-up window. Now you need to solve the problem of saving the status in the pop-up window. There are two solutions. The first solution is to upload the value to the pop-up window using the query string, and the corresponding processing will be done in the pop-up window. After the other solution is selected for the user, only hide the DIV in the pop-up window. The next time you open the window, only the DIV will be displayed, instead of re-loading the page. This will save the status. However, in the latter way, the status will also be lost after the homepage is reversed (this is a problem in the latter solution ). The implementation of the latter scheme is to make the following changes in the fnpopup function:

Function fnpopup (){
Document. getelementbyid ('popup'). style. Display = 'block ';
// Load the page only when the page is displayed for the first time
If (window. Frames [0]. Location. href = 'about: blank ')
Window. Frames [0]. Location. href = "dialog1.aspx ";
}

This scheme aims to explain how to judge the status of the sub-window in the parent window. It is more ideal to use the query string in the specific use process.