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
>
作者:
青羽
查看全文
相关阅读:
离散数学期中复习
计算机组成原理实验_算术逻辑运算器的实现
数值分析第一章插值方法
数值分析绪论
数值分析第三章 常微分方程的差分方法
数值分析第二章 数值积分
数据库删除信息后,再次加入信息ID不再从1开始的解决办法
Codeforces Round #670 (Div. 2)(树的重心,dfs求子树大小)
Codeforces Round #670 (Div. 2)B. Maximum Product(5个数乘积最大)
Codeforces Round #668 (Div. 2)A->C
原文地址:https://www.cnblogs.com/tenghoo/p/795165.html
最新文章
CodeForces 1363D. Guess The Maximums
CodeForces 1363E. Tree Shuffling
CodeForces 1363B.Subsequence Hate
CodeForces 1363A. Odd Selection
CodeForces 1358E.Are You Fired?
CodeForces1358 C. Celex Update
es6环境搭建
vscode使用教程(web开发)
Codeforces 1286B. Numbers on Tree题解
Cayley定理
热门文章
土地征用Land Acquisition(斜率优化DP)
Codeforces 1214F. Employment题解
凸四边形不等式法则(平行四边形法则)
Atcoder Regular Contest 089E
Atcoder Regular Contest 076 F
UVA1045 The Great Wall Game
HDU多校联赛2019Round3. 1007(HDU6609) Find the answer 题解
LeetCode第 190 场周赛
Educational Codeforces Round 87 (Rated for Div. 2)
最长回文子串求解_马拉车算法学习
Copyright © 2011-2022 走看看