search

Home >Web Front-end >JS Tutorial >Detailed explanation of the use of showModalDialog modal dialog box and browser compatibility_javascript skills

Detailed explanation of the use of showModalDialog modal dialog box and browser compatibility_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:04:271389browse

1.What is ModalDialog?
showModalDialog is a method of jswindow object. Like window.open, it opens a new page.
The difference is: after showModalDialog opens the child window, the parent window cannot obtain focus (that is, it cannot be operated).
You can set the value of window.returnValue in the child window so that the parent window can obtain this returnvalue.

2. An example
1) Main window main.html,
2) Open the sub-window sub.html by showModalDialog in the main window
3) In the sub-window Set returnValue in the window and return it to the main window using

main.html

Copy code The code is as follows:





<script><br>functionshowmodal()<br>{<br> varret=window.showModalDialog("sub.html?temp=" Math.random());<br>alert("subreturnvalueis" ret);<br>}<br></script>




sub.html
Copy code The code is as follows:





<script><br>functionreturnMain()<br>{<br>window .returnValue="returnfromsub";<br>window.close();<br>}<br></script>





特别说明：在main.html中showModalDialog的方法时，有使用到Math.random()的目的是避免缓存。

3.showModalDialog详细使用
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight对话框高度，不小于100px，ＩＥ４中dialogHeight和dialogWidth默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
dialogWidth:对话框宽度。
dialogLeft:距离桌面左的距离。
dialogTop:离桌面上的距离。
center:{yes|no|1|0}：窗口是否居中，默认yes，但仍可以指定高度和宽度。
help:{yes|no|1|0}：是否显示帮助按钮，默认yes。
resizable:{yes|no|1|0}［ＩＥ５＋］：是否可被改变大小。默认no。
status:{yes|no|1|0}［IE5+］：是否显示状态栏。默认为yes[Modeless]或no[Modal]。
scroll:{yes|no|1|0|on|off}：指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。
dialogHide:{yes|no|1|0|on|off}：在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{sunken|raised}：指明对话框的边框样式。默认为raised。
unadorned:{yes|no|1|0|on|off}：默认为no。

4. Browser compatibility
But not all browsers are compatible with this usage.
If you run the above example in Chrome, the parent window can gain focus at will, the effect is the same as window.open, and the returnVale obtained is also undefined.
The following is the support status of this method in major browsers.

浏览器 是否支持 状态
IE9 ○  
Firefox13.0 ○  
safari5.1 ○  
chrome19.0 × 并不是模态对话框，而是open了一个新窗体
Opera12.0 × 什么也发生，连个窗体都不弹

If the parameter vArguments passed in is window:

Copy the code The code is as follows:

var ret = window.showModalDialog("sub.html?temp=" Math.random(),window);

则在子窗口中，以下的值为：
浏览器 模态对话框 window.opener window.dialogArguments returnValue 
 IE9  ○  undefined  [object Window]  ○
 Firefox13.0  ○  [objectWindow]  [object Window]  ○
 safari5.1  ○  [objectWindow]  [object Window]  ○
chrome19.0 × [objectWindow] undefined ×

Note that in Firefox browser, if the subform is refreshed, window.dialogArguments will still be lost and become undefined. From the above results, we can see that the return value returnValue is only returned by the chrome browser as undefined, and other browsers have no problem

5. How to solve Chrome compatibility issues.
The direction is: set window.opener.returnValue=""
main.html

Copy code The code is as follows:


🎜><script><br>function showmodal()<br>{<br> var ret = window.showModalDialog("sub.html?temp=" Math.random(),window);<br> //for Chrome<br> if(ret==undefined)<br> {<br> ret = window.returnValue;<br> }<br> alert("sub return value is " ret);<br>}<br>&lt ;/script><br><BODY> <br><INPUT id=button1 type=button value="open sub" name=button1 onclick="showmodal();"> <br></BODY> <br></HTML><br><br><br>sub.html<br> </div> <br><br><div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="14963" class="copybut" id="copybut14963" onclick="doCopy('code14963')"><u> The code is as follows:</u></a></span><HTML> </div><HEAD> <div class="codebody" id="code14963"><META NAME="GENERATOR" Content="oscar999"> script><br>function returnMain()<br>{<br> if(window.opener!=undefined)<br> {<br> window.opener.returnValue = "return from sub"; <br> }else{ <br> window.returnValue = "return from sub";<br> }<br> window.close();<br>}<br></script>

< INPUT id=button1 type=button value="return and close" name=button1 onclick="returnMain()">




Here is to determine whether certain objects are defined to distinguish browsers. Of course, you can also determine the type of browser

The returnValue of the parent window is borrowed here. If the returnValue of the parent window is also used for other purposes, it can be replaced by replacement, as:
var oldValue = window.returnValue;
var newValue = showModalDialog()
window.returnValue = oldValue


6. It should be noted that the test under Chrome needs to put the html file into the web server (Tomcat,...) and access the test through http url. Otherwise it will not be successful.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Expand some incompatible methods in IE such as contains, startWith, etc. _javascript skillsNext article：Expand some incompatible methods in IE such as contains, startWith, etc. _javascript skills

Related articles

See more