JavaScript Popup Window method

Source: Internet
Author: User

This article summarizes the commonly used JavaScript pop-up window method, for everyone to compare the reference, hope to be helpful to everyone. The detailed methods are as follows:

1. Silently refresh the webpage:

We have found that some pages, when refreshed, will pop up a prompt window, the point "OK" will be refreshed.
And some pages will not prompt, do not pop up the prompt window, directly on the refresh.
If the page does not have a form,
The prompt window will not pop up
If the page has a form form,
A) <form method= "POST" ...>
A popup window will appear
b) <form method= "Get" ...>
does not eject

2. How JavaScript Refreshes the page:

?
1 window.location.reload();

Refresh the parent window using a pop-up window with window.open ()

?
1 window.opener.location.reload()

Modal window with Window.showdialog pop-up

?
1 window.dialogArguments.location.reload();

3.javascript Popup Window Code:
window.open () Mode:
window.open () Support environment: javascript1.0+/jscript1.0+/nav2+/ie3+/opera3+
Basic syntax:

?
1 window.open(pageURL,name,parameters)

which
Pageurl as child window path
Name is a child window handle
Parameters is the window parameter (each parameter is separated by commas)

Example:

?
123456 <SCRIPT> <!-- window.open (‘page.html‘,‘newwindow‘,‘height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no‘) //写成一行 --> </SCRIPT>

After the script runs, Page.html will open in the new form NewWindow, with a width of 100, a height of 400, 0 pixels from the top of the screen, 0 pixels left on the screen, no toolbars, no menu bars, no scroll bars, no resizing, no address bar, no status bar.
Please compare.

In the above example, there are a few parameters that are commonly used, and there are many other parameters, see four.


Various parameters
Where yes/no can also use 1/0;pixel value for a specific value, unit pixels.

Parameters | Range of Values | Description
| |
alwayslowered | yes/no | Specifies that the window is hidden after all windows
alwaysraised | yes/no | Specifies that the window hovers above all windows
depended | yes/no | Whether to close at the same time as the parent window
Directories | yes/no | NAV2 and 3 's catalog columns are visible
Height | Pixel value | Window height
hotkeys | yes/no | Set safe exit Hotkey in window without menu bar
Innerheight | Pixel value | The pixel height of the document in the window
Innerwidth | Pixel value | The pixel width of the document in the window
Location | yes/no | Whether the location bar is visible
MenuBar | yes/no | Whether the menu bar is visible
Outerheight | Pixel value | Set the pixel height of the window (including the decorative border)
Outerwidth | Pixel value | Set the pixel width of the window (including the decorative border)
resizable | yes/no | Whether the window size can be adjusted
ScreenX | Pixel value | The pixel length of the window from the left edge of the screen
ScreenY | Pixel value | The pixel length of the window from the top edge of the screen
ScrollBars | yes/no | Whether the window can have a scroll bar
TitleBar | yes/no | Whether the window title bar is visible
Toolbar | yes/no | Whether window toolbars are visible
Width | Pixel value | The pixel width of the window
Z-look | yes/no | Whether the window is activated to float on top of other windows

?
12345678 function ShowDialog(url) {  var iWidth=300; //窗口宽度  var iHeight=200;//窗口高度  var iTop=(window.screen.height-iHeight)/2;  var iLeft=(window.screen.width-iWidth)/2;  window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft); }


window.showModalDialog Way:

Basic Introduction:

ShowModalDialog () (IE 4+ support)
showModelessDialog () (IE 5+ support)
The window.showModalDialog () method is used to create a modal dialog box that displays HTML content.
The Window.showmodelessdialog () method is used to create a non-modal dialog box that displays HTML content.

How to use:

?
12 vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

Parameter description:

surl--
Required parameter, type: String. Used to specify the URL of the document to be displayed by the dialog box.
varguments--
Optional parameter, type: Variant. Used to pass parameters to the dialog box. There are no limits on the types of arguments passed, including arrays. The dialog box uses window.dialogarguments to get the arguments passed in.
sfeatures--
Optional parameter, type: String. Used to describe the appearance of the dialog box and other information, you can use the following one or several, with a semicolon ";" Separated.
1.dialogHeight: Dialog height, not less than 100px,ie4 in dialogheight and dialogwidth the default unit is EM, and IE5 is PX, for the convenience of its see, in the definition of modal Mode dialog box, use PX to do the unit.
2.dialogWidth: Width of the dialog box.
3.dialogLeft: The distance from the left of the screen.
4.dialogTop: Distance from the screen.
5.center: {yes | no | 1 | 0}: The window is centered, the default is yes, but you can still specify the height and width.
6.help: {yes | no | 1 | 0}: Whether the Help button is displayed, default yes.
7.resizable: {yes | no | 1 | 0} [ie5+]: Whether the size can be changed. Default No.
8.status: {yes | no | 1 | 0} [ie5+]: Whether the status bar is displayed. Default is yes[Modeless] or no[modal].
9.scroll:{Yes | no | 1 | 0 | on | off}: Indicates whether the dialog box displays a scroll bar. The default is yes.

The following properties are used in an HTA and are generally not used in general Web pages.

10.dialoghide:{Yes | no | 1 | 0 | on | off}: Whether the dialog box is hidden when printing or printing preview. The default is No.
11.edge:{Sunken | raised}: Indicates the border style of the dialog box. The default is raised.
12.unadorned:{Yes | no | 1 | 0 | on | off}: default is No.

Parameter passing:

(1). To pass a parameter to a dialog box, pass it through varguments. Type is not limited, for string types, the maximum is 4,096 characters. You can also pass objects, for example:
-------------------------------
Parent.htm page:

?
12345 <script>varobj = newObject();obj.name="jb51";window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");</script>

Modal.htm page:

?
1234 <script>varobj = window.dialogArgumentsalert("您传递的参数为:"+ obj.name)</script>

(2) You can return information by Window.returnvalue to the window that opens the dialog box, or it can be an object. For example:

Parent.htm page Code:

?
12345678 <script>str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");alert(str);</script>modal.htm<script>window.returnValue="http://www.jb51.com";</script>

Example:

?
12345678 function ShowDialog(url) {  var iWidth=300; //窗口宽度  var iHeight=200;//窗口高度  var iTop=(window.screen.height-iHeight)/2;  var iLeft=(window.screen.width-iWidth)/2;  window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no"); }

Note the second argument here, window

4. Mode window data does not refresh (cache) problem

Add the following statement to the JSP page

?
12345 <% &NBSP;&NBSP;&NBSP; Response.setheader ( "Pragma" "No-cache" ); &NBSP;&NBSP;&NBSP; response.setheader ( "Cache-control" &NBSP;&NBSP;&NBSP; response.setdateheader ( "Expires" , 0 ); %>

5. mode window, link popup new Window issue:

_blank, open the linked file in a new browser window.

_parent, loads the linked file into the parent frameset or parent window that contains the linked frame. If the frame containing the link is not nested, the linked file is loaded in a full-screen browser window, just like the _self parameter.

_self, open the linked document in the same frame or window. This parameter is the default value and is usually not specified.

_top, the linked document is opened in the current entire browser window, so all frames are deleted.

Add <a href= "a.html" target= "_blank" between

6. How to close the page without prompting:

?
123456789101112131415 function CloseWin(){  var ua = navigator.userAgent; var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;  if(ie){ var IEversion = parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))));  if( IEversion< 5.5){  var str = ‘‘;  document.body.insertAdjacentHTML("beforeEnd", str);   document.all.noTipClose.Click();  } else {   window.opener =null; window.close();  } }else{ window.close() }}

Interested readers can debug the above methods, I believe it will give you some inspiration and help.

JavaScript Popup Window method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.