Detailed explanation of the use of showModalDialog modal dialog box and browser compatibility

Home

Web Front-end

JS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:04 PM

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 of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7641

CakePHP Tutorial

1392

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

150

Related knowledge

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...

See all articles