当前位置:Gxlcms > JavaScript > JavaScript实现模态对话框源代码大全_javascript技巧

JavaScript实现模态对话框源代码大全_javascript技巧

时间:2021-07-01 10:21:17 帮助过:3人阅读

首先,来说一下对话框:
对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一,是与用户交互的重要手段。对话框是一个特殊的窗口,任何对窗口进行的操作(如移动、最大化、最小化等)也可以在对话框实施。
对话框大致可以分为以下两种:
(1)模态对话框:模态对话框弹出后,独占了系统资源,用户只有在关闭该对话框后才可以继续执行,不能够在关闭对话框之前执行应用程序其他部分的代码。模态对话框一般要求用户做出某种选择。
(2)非模态对话框:非模态对话框弹出后,程序可以在不关闭该对话框的情况下继续执行,在转入到应用程序其他部分的代码时可以不需要用户做出响应。非模态对话框一般用来显示信息,或者实时地进行一些设置。
模态窗口在传统编程语言中很常见,简单的说就是,如果是模态的,就是打开一个子窗口,如果这个子窗口不关闭,就不能操作它的父窗口,原来程序暂停执行,直到这个模态窗口关闭后才回到原来程序继续。
非模态的就是直接显示出来,然后原来的程序继续执行下面的语句,而且其他窗口也呈可用状态。
模态对话框独占了用户的输入,当一个模态对话框打开时,用户只能与该对话框进行交互,而其他用户界面对象收不到输入信息。应用程序用到的大部分对话框都是模态对话框。
通常浏览器中windwo.open或超链接弹出的新窗口就是非模式窗口,而模式窗口是类似alert那种必须关闭才能响应其他事件的窗口。
明白了对话框的模态和非模态,来看下边在B/s结构应用程序的开发中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,
在IE中,我们可以使用window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。
这里是window.showModalDialog弹出窗口的一个实例函数:
代码如下:



二、JavaScript+div实现模态对话框:

一个类似163邮箱对话框的功能。主要是2个层来完成这个效果,第一就是用来锁住下面整个页面的层,要有透明的效果,可以用filter:alpha(opacity=50)。还有一个层是用来显示对话框内容的,所以zIndex参数一定要设置的比锁频层高。

对话框的CSS可以自己定义一下,要注意的是,CSS中body一定要定义margin:0,否则锁频时,会出现空隙,而产生锁频不完整的问题,还有一个就是Select这个控件的问题,因为在IE里,他的zIndex很高,所以锁频层盖不住他,这里可以用两种办法,一种是把他隐藏掉,一种可以把他的disabled属性设置为false,第二种方法只能禁止编辑它,但是还是会在锁频层上当,效果不佳,还是隐藏掉比较好。
代码如下:


`````



输出其 HTML。也就是在一段 HTML 输出后,紧接着输出其初始化脚本。(这个问题值得 ASP.NET 控件开发者引起注意

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

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>

六、使用div仿javascript模态窗口

代码如下:







asfsdfasdfasdf