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

2024-12-21 15:54:33

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

代码如下:

例：

代码如下:

需要注意的是FireFox浏览器中不支持showmodaldialog() ，这是因为在最初MozillaSuite 中（Firefox 是从这个套件衍生），是支持 showmodaldialog()的，不过后来发现 showmodaldialog() 存在安全隐患，不久后就取消了对showmodaldialog() 的支持，这个事情还发生在 bug 194404 提交前。在想出更好的解决方案前，相信 Firefox 是不会提供对 showmodaldialog() 的支持的。

打开弹窗只能使用window.open实现这样的功能，window.open的语法如下 :
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,要让FireFox下开启的窗口跟IE的showModalDialog一样的话, 只要在sFeatures中加个modal=yes就可以了,也许可能是出于安全考虑modal=yes，打开的并不是模式窗口，范例如下:

代码如下:

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

由于在firefox没有showModalDialog方法。则用如下判断来兼容两种浏览器：

代码如下:

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

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

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

代码如下:

<html>
<title>`````</title>
<head>
<meta name="keywords" content="51windows.Net">
<meta http-equiv=content-type content="text/html; charset=gb2312">
<script type="text/javascript"><!--
var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;
function StrCode(str)
{
if(encodeURIComponent)
return encodeURIComponent(str);
if(escape)
return escape(str);
}

s = "gecko";
if ((i = ua.indexOf(s)) >= 0)
{
this.isNS = true;
return;
}

s = "safari";
if ((i = ua.indexOf(s)) >= 0)
{
this.isSF = true;
return;
}
}

function DialogShow(showdata,ow,oh,w,h)
{
var objDialog = document.getElementById("DialogMove");
if (!objDialog)
objDialog = document.createElement("div");
t_DiglogW = ow;
t_DiglogH = oh;
DialogLoc();
objDialog.id = "DialogMove";
var oS = objDialog.style;
oS.display = "block";
oS.top = t_DiglogY + "px";
oS.left = t_DiglogX + "px";
oS.margin = "0px";
oS.padding = "0px";
oS.width = w + "px";
oS.height = h + "px";
oS.position = "absolute";
oS.zIndex = "5";
oS.background = "#FFF";
oS.border = "solid #000 1px";
objDialog.innerHTML = showdata;
document.body.appendChild(objDialog);
}

function DialogHide()
{
ScreenClean();
var objDialog = document.getElementById("DialogMove");
if (objDialog)
objDialog.style.display = "none";
}

oS.filter = "alpha(opacity=50)";
oS.opacity = 40/100;
oS.MozOpacity = 40/100;
document.body.appendChild(objScreen);
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "hidden";
}

function ScreenClean()
{
var objScreen = document.getElementById("ScreenOver");
if (objScreen)
objScreen.style.display = "none";
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "visible";
}

value="">2</option></select>
<input type="text" name="" value="aaa">
<input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa">
</div>
</body>
</html>

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

代码如下:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>模态对话框</title> </head> <body> <div> <hr> </div>  <table width="100%" height="100%" id="cover" style="position:absolute;top:0px;left:0px;display:none;background-color:#666666;" onselectstart="javascript:return false;"> <tr> <td id="dlg" width="100%" height="100%" align="center" valign="center"> </td> </tr> </table> <script type="text/javascript" language="javascript"></script> <input type="button" value="点我" onclick="javascript:objDlg.DoModal('注意', '吃饭了', MB_OK, 'objDlg');"> <input type="button" value="然后点我" onclick="javascript:objDlg2.DoModal('注意', '吃饭了？', MB_YES+MB_NO, 'objDlg2');"> </body> </html>

五、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">

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

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

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

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

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

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

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

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

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

<body>
    <input id="txt1">
    <script type="text/javascript">
    <!--
    var _document_body_onload = document.body.onload;
    document.body.onload = function(){
        // 这里做你需要做的初始化动作
        alert(document.getElementById('txt1').offsetWidth);

if(_document_body_onload && typeof(_document_body_onload) == 'function')
            _document_body_onload();
    }
    //-->
    </script>
</body>
</html>

六、使用div仿javascript模态窗口

代码如下:

<!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>
<style type="text/css"></style><style type="text/css" bogus="1">#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none;}
#id2{top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;}</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asfsdfasdfasdf</title>
<script language="javascript" type="text/javascript">
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.id2.style.pixelTop += percent;
if(NS) document.id2.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.id2.style.pixelLeft += percent;
if(NS) document.id2.left += percent;
lastScrollX = lastScrollX + percent;
}
}


function checkFocus(x,y) {
stalkerx = document.id2.pageX;
stalkery = document.id2.pageY;
stalkerwidth = document.id2.clip.width;
stalkerheight = document.id2.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("id2") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.id2;
stalkerTouchedX = e.pageX-document.id2.pageX;
StalkerTouchedY = e.pageY-document.id2.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}

if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1)
// --></script>
</head>

<body>
<p> </p>
<div id="id2">
这里可以放内容，或者添加div用innerhtml进行添加内容就可以了
<br/><input name="Button1" type="button" value="button" onclick="hide()"/>
</div>
<div id="id1"> 123</div>

</html>

Javascript 倒计时源代码.(时.分.秒) 详细注释版

随便写写!闲着无聊!代码如有bug之处欢迎阁下强力拍砖! JS CODE 复制代码代码如下: <script type="text/javascript" language="javascript"> //总时间,已分为单位 var time = 100; //小时 var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0; //分 var m = time % 60; //秒 var s
javascript实现图片切换的幻灯片效果源代码

网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享废话少说,看代码复制代码代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div
JS禁止查看网页源代码的实现方法

先给大家分享下三种查看路径的方法: 1.直接按F12 2.Ctrl+Shift+I查看 3.鼠标点击右键查看把以上三种状态都屏蔽掉就可以了,document有onkeydown(键盘按键事件),该事件里面找到对应的keycode并处理就可以,document也有oncontextmenu鼠标右键事件,屏蔽即可. JS撸码如下: window.onload=function(){ document.onkeydown=function(){ var e=window.event||argumen
用js一招破解所有网页的加密源代码的方法

现在很流行源代码加密,无论出于作者想保护自己的资源,还是放马者为了不让别人发现网页有马等等,都对源代码加密. 想破解它很简单,一招就搞定了,是不是用点心动了呢?是的就快跟我来吧!comeon gogogo! 1/首先我们来看看一个网页的源代码,为了不浪费大家的时间,我在免费空间随便上传个网页(已经加密的)大家来看看,为了便以大家看到结果,我做很简单(真的很简单咯)我门来看看他的源代码,方法有很多,我随便用一种 ,这是什么东西,难道这就是传说中的秘籍,,说笑了,大家是不是看不明呢,那我们就来进行第
小型js框架veryide.librar源代码

复制代码代码如下: /* * Copyright VeryIDE,2007-2008 * http://www.veryide.com/ * * $Id: veryide.library.js,v2.3 17:29 2008-11-16 leilei $ */ function $(obj){return document.getElementById(obj);} function $N(obj){return document.getElementsByName(obj);} functi
javascript实现禁止右键和F12查看源代码

功能很简单,代码也很简洁,这里就不多废话了,直接奉上源码,需要的小伙伴直接带走. 复制代码代码如下: function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("欢迎光临寒舍,有什么需要帮忙的话,请与站长联系!谢谢您的合作!!!"); oncontextmenu='return false'; } } if (document.layers) { if (e.which
JS远程获取网页源代码实例

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>远程网页源代码读取</title> <sty
JavaScript 实现模态对话框源代码大全

首先,来说一下对话框: 对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一,是与用户交互的重要手段.对话框是一个特殊的窗口,任何对窗口进行的操作(如移动.最大化.最小化等)也可以在对话框实施. 对话框大致可以分为以下两种: (1)模态对话框:模态对话框弹出后,独占了系统资源,用户只有在关闭该对话框后才可以继续执行,不能够在关闭对话框之前执行应用程序其他部分的代码.模态对话框一般要求用户做出某种
JavaScript实现模态对话框实例

这篇文章主要介绍了JavaScript实现模态对话框实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dialogue</title> <style> *{ margin: 0; } .hid
javascript showModalDialog模态对话框使用说明

1. 标准的方法复制代码代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+&
利用javascript打开模态对话框(示例代码)

1. 标准的方法复制代码代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig
asp.net下模态对话框关闭之后继续执行服务器端代码的问题

最近做一个从Access项目向 Asp.net + SqlServer迁移工作,其中遇到了这种情况,在Access窗体的一个按钮事件中,代码大体上是这么个功能:弹出模态对话框,在关闭对话框之后继续走一段数据库操作代码. 在Asp.net里弹出模态对话框容易,但是在模态对话框关闭之后还要继续执行服务器代码,这就要求当对话框关闭之后页面要立即提交.于是有了以下的解决方法. 在Web Form中拖入服务器端按钮,并假设此按钮ID为 btnComput,在隐藏页面的 Page_Load 中用代码中这样写
封装的dialog插件基于bootstrap模态对话框的简单扩展

在使用bootstrap 模态对话框时需要在页面写对话框html,如果一个页面有许多地方需要对话框,那意味着需要写多个,感觉很麻烦,平时不太习惯bootstrap 模态对话框这种方式,所以做了个简单封装及扩展,增加了自定义标题,宽度和高度,并根据宽高居中显示. 默认属性: id:"modal",//弹窗id title:"dialog",//弹窗标题 width:"600",//弹窗宽度,暂时不支持% height:"500"
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

What?模态对话框失效了? 上个礼拜修改测试一个后台管理项目,在测试与各个浏览器兼容性的时候,发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个窗体,而且返回值returnValue也无法返回,一直是undefined.这么多问题很令人头疼,下面就各个主流最新版的浏览器进行了一下测试. 浏览器是否支持状态 IE9 ○ Firefox13.0 ○ safari5.1 ○ chrome19.0
JS 模态对话框和非模态对话框操作技巧汇总

模态窗口 javascript 技巧汇总(传值.打开.刷新) 1.要弹出的页面中,一定要保证<head></head>标签间有<base target="_self">,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面. 2.被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());语句,用以关闭当前的模态窗口. 3.因为幽默的缓存原因,如果你在模态窗口中修改了数据,你会发现,父
JS对话框_JS模态对话框showModalDialog用法总结

父窗口: 复制代码代码如下: <html><head><title>无标题页</title><script language="javascript" type="text/javascript">function opendialog1() { var someValue=window.showModalDialog("b.html","","dialo
Bootstrap模态对话框的简单使用

模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 1.用法您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-tog

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

相关推荐

随机推荐

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