JavaScript+div实现模态对话框
2008-01-23 12:17
651 查看
一个类似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);
}
function Browser(){
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.isOP = false;
this.isSF = false;
ua = navigator.userAgent.toLowerCase();
s = "opera";
if ((i = ua.indexOf(s)) >= 0){
this.isOP = true;return;
}
s = "msie";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
return;
}
s = "netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
return;
}
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";
}
function DialogLoc(){
var dde = document.documentElement;
if (window.innerWidth){
var ww = window.innerWidth;
var wh = window.innerHeight;
var bgX = window.pageXOffset;
var bgY = window.pageYOffset;
}else{
var ww = dde.offsetWidth;
var wh = dde.offsetHeight;
var bgX = dde.scrollLeft;
var bgY = dde.scrollTop;
}
t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}
function ScreenConvert(){
var browser = new Browser();
var objScreen = document.getElementById("ScreenOver");
if(!objScreen)
var objScreen = document.createElement("div");
var oS = objScreen.style;
objScreen.id = "ScreenOver";
oS.display = "block";
oS.top = oS.left = oS.margin = oS.padding = "0px";
if (document.body.clientHeight) {
var wh = document.body.clientHeight + "px";
}else if (window.innerHeight){
var wh = window.innerHeight + "px";
}else{
var wh = "100%";
}
oS.width = "100%";
oS.height = wh;
oS.position = "absolute";
oS.zIndex = "3";
if ((!browser.isSF) && (!browser.isOP)){
oS.background = "#cccccc";
}else{
oS.background = "#cccccc";
}
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";
}
function Demo(string){
ScreenConvert();
var ShowDiv="<div style=/"padding:10px;/">"+string+" <br /><br /><input type=/"button/" onclick=/"DialogHide();/" value=/" 关闭 /"></div>";
DialogShow(ShowDiv,250,120,300,100);
}
</script>
<style>
body{margin:0}
</style>
</head>
<body>
<div style="border:1px solid;width:100%">
<div>
<input type="button" value="显示对话框" onclick="javascript:Demo('o(∩_∩)o...哈哈!');">
<select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option 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>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
说实话，效果不好，借助div的透明特性，
在其下的不可使，但可见的特性来实现，但如果div的index也不能实现的在select的上面的话，则无法实现
可以看看asp.net Ajax中的Model popup， 其实现是将其下的所以如
this._tagWithTabIndex = new Array('A','AREA','BUTTON','INPUT','OBJECT','SELECT','TEXTAREA','IFRAME');
没有用透明，但好像用了disabled
======================
所为模态对话框就是指在该对话框返回之前程序只能跟该对话框交互.像我们使用菜单命令的"打开"对话框就是一个模态的.alert()调用的也是模态的.理解了模态对话框想必非模态大家也知道是什么意思了吧.呵呵.这里我主要说说建创自定义的模态对话框.
为 什么不调用系统函数呢?在DOM对象中要建创一个模态对话框调用window.showModalDialog(sURL,vArguments, sFeatures).有时我们很希望使用我们自定义的confrim().特别是随着Ajax技术的发展,Web桌面式应用程序的开发,我们越来越希望 有一套自己的style.但是很让我们失望的是系统给我们创建的都是带有title的窗口.下面我给大家提供一个创建具有模态效果的自定义窗口的思路
思 路:我们都知道windows窗口是由a-z序的层结构显示的.同样网页也是这种层次结构.style中z-index(通常称z序)属性决定层的位置. 默认z-index:-1是最底层.通常最底层是我们的页面的主要构架和内容.如果我们要使用自定义的窗口/对话框,则应该z-index>-1. 但是这样我们设计的一个非模态的对话框/窗口,焦点可以被自定义窗口以外的元素获焦.其实我们理解窗口是以"层"为结构的道理之后,很容易可以想到在网页 最底层与自定义窗口框之间再插入一个"层",使这个"层"完全笼罩在最底层之上而居于对话框之下,所为"完全笼罩"也就是大小能遮住最底层的内容(其目的 是为了让最底层不能获焦),为了能让"层"起作用,必须设置其背景颜色,否则层无效.这样页面的最底层就被笼罩层屏蔽了,由于自定义窗口层在笼罩层之上, 所以现在页面中只能看到笼罩层和自定义窗口层了,这样最底层都看不见了又怎么获焦呢.嘿嘿.可能我们使用自定义窗口的同时还希望能看到最底层内容,这时我 们可以将笼罩层设置成透明的,这样最底层的内容就显示出来了,只是在自定义窗口返回前最底层无法获焦..至此,我们的模态对话框完成了..
步骤:
1.首先.做好自定义的窗口/对话框层.并将其隐藏style.display=none
2.制作笼罩层.插入div,设置其宽/高大于最底层宽/高,完全笼罩在最底层上面,设置其透明度alpha(opacity=0),并将其隐藏style.display=none.
3.调用对话框时同时将两个层同时显示出来
4.关闭对话框时同时将两个层隐藏
用Div模拟模态对话框..
ie6中select不能被div下面是ie6的bug,在ff,ie7中得到解决，
对话框的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);
}
function Browser(){
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.isOP = false;
this.isSF = false;
ua = navigator.userAgent.toLowerCase();
s = "opera";
if ((i = ua.indexOf(s)) >= 0){
this.isOP = true;return;
}
s = "msie";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
return;
}
s = "netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
return;
}
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";
}
function DialogLoc(){
var dde = document.documentElement;
if (window.innerWidth){
var ww = window.innerWidth;
var wh = window.innerHeight;
var bgX = window.pageXOffset;
var bgY = window.pageYOffset;
}else{
var ww = dde.offsetWidth;
var wh = dde.offsetHeight;
var bgX = dde.scrollLeft;
var bgY = dde.scrollTop;
}
t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}
function ScreenConvert(){
var browser = new Browser();
var objScreen = document.getElementById("ScreenOver");
if(!objScreen)
var objScreen = document.createElement("div");
var oS = objScreen.style;
objScreen.id = "ScreenOver";
oS.display = "block";
oS.top = oS.left = oS.margin = oS.padding = "0px";
if (document.body.clientHeight) {
var wh = document.body.clientHeight + "px";
}else if (window.innerHeight){
var wh = window.innerHeight + "px";
}else{
var wh = "100%";
}
oS.width = "100%";
oS.height = wh;
oS.position = "absolute";
oS.zIndex = "3";
if ((!browser.isSF) && (!browser.isOP)){
oS.background = "#cccccc";
}else{
oS.background = "#cccccc";
}
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";
}
function Demo(string){
ScreenConvert();
var ShowDiv="<div style=/"padding:10px;/">"+string+" <br /><br /><input type=/"button/" onclick=/"DialogHide();/" value=/" 关闭 /"></div>";
DialogShow(ShowDiv,250,120,300,100);
}
</script>
<style>
body{margin:0}
</style>
</head>
<body>
<div style="border:1px solid;width:100%">
<div>
<input type="button" value="显示对话框" onclick="javascript:Demo('o(∩_∩)o...哈哈!');">
<select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option 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>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
说实话，效果不好，借助div的透明特性，
在其下的不可使，但可见的特性来实现，但如果div的index也不能实现的在select的上面的话，则无法实现
可以看看asp.net Ajax中的Model popup， 其实现是将其下的所以如
this._tagWithTabIndex = new Array('A','AREA','BUTTON','INPUT','OBJECT','SELECT','TEXTAREA','IFRAME');
没有用透明，但好像用了disabled
======================
用Div模拟模态对话框..
对话框分为模态对话框和非模态对话框.所为模态对话框就是指在该对话框返回之前程序只能跟该对话框交互.像我们使用菜单命令的"打开"对话框就是一个模态的.alert()调用的也是模态的.理解了模态对话框想必非模态大家也知道是什么意思了吧.呵呵.这里我主要说说建创自定义的模态对话框.
为 什么不调用系统函数呢?在DOM对象中要建创一个模态对话框调用window.showModalDialog(sURL,vArguments, sFeatures).有时我们很希望使用我们自定义的confrim().特别是随着Ajax技术的发展,Web桌面式应用程序的开发,我们越来越希望 有一套自己的style.但是很让我们失望的是系统给我们创建的都是带有title的窗口.下面我给大家提供一个创建具有模态效果的自定义窗口的思路
思 路:我们都知道windows窗口是由a-z序的层结构显示的.同样网页也是这种层次结构.style中z-index(通常称z序)属性决定层的位置. 默认z-index:-1是最底层.通常最底层是我们的页面的主要构架和内容.如果我们要使用自定义的窗口/对话框,则应该z-index>-1. 但是这样我们设计的一个非模态的对话框/窗口,焦点可以被自定义窗口以外的元素获焦.其实我们理解窗口是以"层"为结构的道理之后,很容易可以想到在网页 最底层与自定义窗口框之间再插入一个"层",使这个"层"完全笼罩在最底层之上而居于对话框之下,所为"完全笼罩"也就是大小能遮住最底层的内容(其目的 是为了让最底层不能获焦),为了能让"层"起作用,必须设置其背景颜色,否则层无效.这样页面的最底层就被笼罩层屏蔽了,由于自定义窗口层在笼罩层之上, 所以现在页面中只能看到笼罩层和自定义窗口层了,这样最底层都看不见了又怎么获焦呢.嘿嘿.可能我们使用自定义窗口的同时还希望能看到最底层内容,这时我 们可以将笼罩层设置成透明的,这样最底层的内容就显示出来了,只是在自定义窗口返回前最底层无法获焦..至此,我们的模态对话框完成了..
步骤:
1.首先.做好自定义的窗口/对话框层.并将其隐藏style.display=none
2.制作笼罩层.插入div,设置其宽/高大于最底层宽/高,完全笼罩在最底层上面,设置其透明度alpha(opacity=0),并将其隐藏style.display=none.
3.调用对话框时同时将两个层同时显示出来
4.关闭对话框时同时将两个层隐藏
用Div模拟模态对话框..
ie6中select不能被div下面是ie6的bug,在ff,ie7中得到解决，
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [ZT]JavaScript+div实现模态对话框[修正版]
- css javascript div实现网页的模态对话框
- js实现div模拟模态对话框展现URL内容
- JavaScript实现模态对话框
- DIV+CSS实现模态锁屏对话框
- JavaScript 实现模态对话框 源代码大全
- JavaScript 实现模态对话框 源代码大全
- JavaScript 实现模态对话框 源代码大全
- JavaScript实现模态对话框
- JavaScript实现模态对话框
- JavaScript动态改变div属性的实现方法
- jQuery插件jmodal模拟对话框实现javascript弹出对话框功能
- cocos2d-x中的模态对话框简单实现
- JavaScript 高级课程之缓冲+多个DIV运动框架实现 + 透明度
- 原生javascript实现DIV拖拽并计算重复面积
- JavaScript与Div对层定位和移动获得坐标的实现代码
- COCOS2DX 3.2 实现模态对话框
- 用javascript实现对div的拖拽功能的实现过程
- Javascript模态窗口实现
- html标签overflow属性和javascript实现div标签滚动问题