zoukankan
html css js c++ java
Javascript模态窗口实现
如图所示:
单击页面上注册时弹出的用户注册模态窗口:
模态窗口js源码:
function
ModalDialog(name,divid,width,height,leftop,topop,color)
{
this
.name
=
name;
//
名称
this
.div
=
divid;
//
要放入窗体中的元素名称
this
.width
=
width;
//
窗体高
this
.height
=
height;
//
窗体宽
this
.leftop
=
leftop;
//
左侧位置
this
.topop
=
topop;
//
上部位置
this
.color
=
color;
//
整体颜色
this
.show
=
function
()
//
显示窗体
{
document.all(obj.name
+
"
_divshow
"
).style.width
=
obj.width;
document.all(obj.name
+
"
_divshow
"
).style.height
=
obj.height;
document.all(obj.name
+
"
_divshow
"
).style.left
=
obj.leftop;
document.all(obj.name
+
"
_divshow
"
).style.top
=
obj.topop;
document.all(obj.name
+
"
_mask
"
).style.width
=
document.body.clientWidth;
document.all(obj.name
+
"
_mask
"
).style.height
=
document.body.clientHeight;
document.all(obj.name
+
"
_divshow
"
).style.visibility
=
"
visible
"
;
document.all(obj.name
+
"
_mask
"
).style.visibility
=
"
visible
"
;
}
this
.close
=
function
()
//
关闭窗体
{
document.all(obj.name
+
"
_divshow
"
).style.width
=
0
;
document.all(obj.name
+
"
_divshow
"
).style.height
=
0
;
document.all(obj.name
+
"
_divshow
"
).style.left
=
0
;
document.all(obj.name
+
"
_divshow
"
).style.top
=
0
;
document.all(obj.name
+
"
_mask
"
).style.width
=
0
;
document.all(obj.name
+
"
_mask
"
).style.height
=
0
;
document.all(obj.name
+
"
_divshow
"
).style.visibility
=
"
hidden
"
;
document.all(obj.name
+
"
_mask
"
).style.visibility
=
"
hidden
"
;
}
this
.toString
=
function
()
{
var
tmp
=
"
<div id='
"
+
this
.name
+
"
_divshow' style='position:absolute; left:0; top:0;z-index:10; visibility:hidden;0;height:0'>
"
;
tmp
+=
"
<table cellpadding=0 cellspacing=0 border=0 width=100% height=100%>
"
;
tmp
+=
"
<tr height=28>
"
;
tmp
+=
"
<td bgcolor='
"
+
obj.color
+
"
' align=right colspan=3>
"
;
tmp
+=
"
</td>
"
;
tmp
+=
"
</tr>
"
;
tmp
+=
"
<tr>
"
;
tmp
+=
"
<td bgcolor='
"
+
obj.color
+
"
' width=2></td>
"
;
tmp
+=
"
<td bgcolor=#ffffff id='
"
+
this
.name
+
"
_content' valign=top> </td>
"
;
tmp
+=
"
<td bgcolor='
"
+
obj.color
+
"
'width=2></td>
"
;
tmp
+=
"
</tr>
"
;
tmp
+=
"
<tr height=2><td bgcolor='
"
+
obj.color
+
"
' colspan=3></td></tr>
"
tmp
+=
"
</table>
"
;
tmp
+=
"
</div>
"
;
tmp
+=
"
<div id='
"
+
this
.name
+
"
_mask' style='position:absolute; top:0; left:0; 0; height:0; background:#666; filter:ALPHA(opacity=60); z-index:9; visibility:hidden'></div>
"
;
document.write(tmp);
document.all(
this
.name
+
"
_content
"
).insertBefore(document.all(
this
.div));
}
var
obj
=
this
;
}
页面调用
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
id
="Head1"
runat
="server"
>
<
title
>
登录
</
title
>
<
script
src
="js/ModalDialog2.js"
type
="text/jscript"
></
script
>
<
script
language
="JavaScript"
>
var
md
=
new
ModalDialog2(
"
md
"
,
"
frm_reg
"
,
300
,
200
,
100
,
100
,
"
#ff0000
"
);
//
显示注册窗口
function
uRegShow()
{
md.show();
return
false
;
}
//
关闭注册窗口
function
uRegdisplay()
{
md.close();
return
false
;
}
</
script
>
</
head
>
<
body
>
<
form
id
="Form1"
name
="form1"
runat
=server
>
<
a
href
=''
onclick
="javascript:return uRegShow();"
>
注册
</
a
>
<
div
style
="display: none;"
>
<
table
id
=frm_reg
width
=200
height
=200
>
<
tr
>
<
td
colspan
=2
>
用户注册
</
td
>
</
tr
>
<
tr
>
<
td
>
name
</
td
>
<
td
><
asp:TextBox
ID
="TextBox1"
runat
="server"
></
asp:TextBox
></
td
>
</
tr
>
<
tr
>
<
td
>
pass
</
td
>
<
td
><
asp:TextBox
ID
="TextBox2"
runat
="server"
></
asp:TextBox
></
td
>
</
tr
>
<
tr
>
<
td
>
<
button
>
确定
</
button
>
</
td
>
<
td
>
<
button
onclick
="uRegdisplay();"
>
关闭
</
button
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
form
>
<
script
language
="javascript"
type
="text/javascript"
>
md.toString();
</
script
>
</
body
>
</
html
>
作者:
青羽
查看全文
相关阅读:
数组
字符对象的方法
事件
判断数据类型
数据类型和变量
语法
快速入门
JavaScript简介
Spring init-method和destroy-method属性的使用
spring3后提供了的context:property-placeholder/元素
原文地址:https://www.cnblogs.com/tenghoo/p/795165.html
最新文章
vue插槽的使用
表单绑定v-model
基础语法2
基础语法1
app.json文件配置
小程序中支持es7的async语法
小程序滚动及相关滚动事件
小程序父子组件通信
微信小程序中的常见弹框
表单控件
热门文章
永久关闭Win10自动更新
Win10系统中部分软件程序输入中文变成问号怎么办
MongoDB加密安装(针对3.4.9和4.2版本)
Oracle查询库中所有表
数据库双机交叉备份
防火墙出入站规则
Windows服务被360清理问题
ORA-01031在sqlplus中使用 as sysdba登录无权限
ORA-01034和ORA-27101
Oracle归档模式及归档日志的操作
Copyright © 2011-2022 走看看