Home >Web Front-end >JS Tutorial >JavaScript implements modal dialog box source code collection_javascript skills

JavaScript implements modal dialog box source code collection_javascript skills

WBOYOriginal: 2016-05-16 18:53:291265browse

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:

Copy the code The code is as follows:

Example:

Copy code The code is as follows:

Click

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:

Copy code The code is as follows:

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

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

Copy the code The code is as follows:

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.

Copy code The code is as follows:

`````

11 22

三、Javascript模态对话框取父页的值
1. a.htm 父页
有 window.showModalDialog("b.htm");
有 Html元素
2.b.htm 弹出页面
能否在 b.htm 上取到 a.htm 中 t1值 ?
回答:
在a.html中设置
var results = window.showModalDialog("b.html");
(results){alert(results["key"]);}
在b.html中
<script> <br>window.Value={key:"返回到父页面"} <br></script>
四、模态对话框模仿MessageBox

复制代码代码如下:

模态对话框

五、showModalDialog 打开的模态对话框有不少经典的缺陷，解决办法

showModalDialog 打开的模态对话框有不少经典的缺陷，在这里不再冗述，我只谈谈最近碰到的几个问题以及解决办法。

问题1. showModalDialog 打开一个 aspx 页面时，如果该页面在之前已经打开过一次，则自动会加载缓存中的页面，而不能显示最新数据。

解决的办法有两种：

(1). 在打开模态框时，给 url 后面多加一个随机参数，来避免页面被缓存：

var url = 'EditFlowNode.aspx?flowId=0&id=2&x=' + Math.random();
var result = window.showModalDialog(url, '', 'status:no; help:no;');

(2). 在该 asp.net 页面的 Page_Load 方法里设定不缓存：

protected void Page_Load(object sender, EventArgs e){
    Response.Expires = 0;
    Response.Cache.SetNoStore();
    Response.AppendHeader("Pragma", "no-cache");
}

问题2. 模态对话框中的内容和脚本加载次序不同，导致的问题。

缘起：考虑如下页面的代码

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
  <title> new document title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
head>

<body>
    <input id="txt1">
    <script type="text/javascript">

    script>
body>
html>

这个页面，如果在普通的 IE 窗口中加载时，提示的信息是 "155"，而在模态对话框中执行时，其数值是 "0"。为什么会这样？

我们注意到普通窗口打开该页面时，当跳出 alert 对话框后，整个页面元素都已经正常显示了；而模态框在打开时，跳出 alert 对话框后，其背景却是一片空白；等点击“确定”后，才会显示出网页内容。
由此可以推测，模态框和普通页面在解析执行 HTML 时的次序不同：

普通页面：依次解析 body 中的元素，并随即绘制(render)解析完的元素。如果碰到 script, 则立刻执行之。

模态对话框：依次解析 body 中的元素，但并未立即绘制(render)它们。如果碰到 script, 则立刻执行之。等 body 都加载完毕后，再依次绘制其中的元素。

由于以上我们示例代码中访问到了 offsetWidth 属性，而我们可以推知，该属性一定是当元素被绘制(render)完毕后，才会自动计算出有意义的数值。所以就导致了问题中看到的现象。

之所以考虑到这个问题，其实是因为我在模态对话框中使用一个第三方控件的时候，出现了 bug，经过调试发现根源的原因在于该控件采用了常用的代码模式来输出其 HTML。也就是在一段 HTML 输出后，紧接着输出其初始化脚本。（这个问题值得 ASP.NET 控件开发者引起注意）

幸运的是，我有这个控件的源代码。因此修改源代码解决了这个问题。我的解法类似于这样：

Copy the code

The code is as follows:

asfsdfasdfasdf

<본문>

这里可以放内容，或者添加div用innerhtml进行添加内容就可以了

123

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：ExtJS 2.0 practical and concise tutorial Border area layout_extjsNext article：ExtJS 2.0 practical and concise tutorial Border area layout_extjs

See more

JavaScript implements modal dialog box source code collection_javascript skills

Related articles