zoukankan
html css js c++ java
弹出窗口功能的实现
方法一:
<!
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
></
title
>
<
style
>
html,body
{
}
{
font-size
:
12px
;
margin
:
0px
;
height
:
100%
;
}
.mesWindow
{
}
{
border
:
#666 1px solid
;
background
:
#fff
;
}
.mesWindowTop
{
}
{
border-bottom
:
#eee 1px solid
;
margin-left
:
4px
;
padding
:
3px
;
font-weight
:
bold
;
text-align
:
left
;
font-size
:
12px
;
}
.mesWindowContent
{
}
{
margin
:
4px
;
font-size
:
12px
;
}
.mesWindow .close
{
}
{
height
:
15px
;
width
:
28px
;
border
:
none
;
cursor
:
pointer
;
text-decoration
:
underline
;
background
:
#fff
}
</
style
>
<
script
>
var
isIe
=
(document.all)
?
true
:
false
;
//
设置select的可见状态
function
setSelectState(state)
{
var
objl
=
document.getElementsByTagName('select');
for
(
var
i
=
0
;i
<
objl.length;i
++
)
{
objl[i].style.visibility
=
state;
}
}
function
mousePosition(ev)
{
if
(ev.pageX
||
ev.pageY)
{
return
{x:ev.pageX, y:ev.pageY}
;
}
return
{
x:ev.clientX
+
document.body.scrollLeft
-
document.body.clientLeft,y:ev.clientY
+
document.body.scrollTop
-
document.body.clientTop
}
;
}
//
弹出方法
function
showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var
bWidth
=
parseInt(document.documentElement.scrollWidth);
var
bHeight
=
parseInt(document.documentElement.scrollHeight);
if
(isIe)
{
setSelectState('hidden');}
var
back
=
document.createElement(
"
div
"
);
back.id
=
"
back
"
;
var
styleStr
=
"
top:0px;left:0px;position:absolute;background:#666;
"
+
bWidth
+
"
px;height:
"
+
bHeight
+
"
px;
"
;
styleStr
+=
(isIe)
?
"
filter:alpha(opacity=40);
"
:
"
opacity:0.40;
"
;
back.style.cssText
=
styleStr;
document.body.appendChild(back);
var
mesW
=
document.createElement(
"
div
"
);
mesW.id
=
"
mesWindow
"
;
mesW.className
=
"
mesWindow
"
;
mesW.innerHTML
=
"
<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>
"
+
wTitle
+
"
</td><td style='1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>
"
+
content
+
"
</div><div class='mesWindowBottom'></div>
"
;
styleStr
=
"
left:
"
+
(((pos.x
-
wWidth)
>
0
)
?
(pos.x
-
wWidth):pos.x)
+
"
px;top:
"
+
(pos.y)
+
"
px;position:absolute;
"
+
wWidth
+
"
px;
"
;
mesW.style.cssText
=
styleStr;
document.body.appendChild(mesW);
}
function
showBackground(obj,endInt)
{
obj.filters.alpha.opacity
+=
1
;
if
(obj.filters.alpha.opacity
<
endInt)
{
setTimeout(
function
()
{showBackground(obj,endInt)}
,
8
);
}
}
//
关闭窗口
function
closeWindow()
{
if
(document.getElementById('back')
!=
null
)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if
(document.getElementById('mesWindow')
!=
null
)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if
(isIe)
{
setSelectState('');}
}
//
测试弹出
function
testMessageBox(ev)
{
var
objPos
=
mousePosition(ev);
messContent
=
"
<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>
"
;
showMessageBox('窗口标题',messContent,objPos,
350
);
}
</
script
>
</
head
>
<
body
>
<
div
style
="padding:20px"
>
<
div
style
="text-align:left"
;
><
a
href
="#none"
onclick
="testMessageBox(event);"
>
弹出窗口
</
a
></
div
>
<
div
style
="text-align:left;padding-left:20px;padding-top:10px"
;
><
select
><
option
>
下拉
</
option
></
select
>
弹出窗口时会将其隐藏,关闭时会让其显示,目的是在IE中防止弹出的DIV挡不住下拉框
</
div
>
<
div
style
="text-align:center"
;
><
a
href
="#none"
onclick
="testMessageBox(event);"
>
弹出窗口
</
a
></
div
>
<
div
style
="text-align:right"
;
><
a
href
="#none"
onclick
="testMessageBox(event);"
>
弹出窗口
</
a
></
div
>
</
div
>
</
body
>
</
html
>
方法二:
<!
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
></
title
>
<
style
>
html,body
{
}
{
font-size
:
12px
;
margin
:
0px
;
height
:
100%
;
}
.mesWindow
{
}
{
border
:
#666 1px solid
;
background
:
#fff
;
}
.mesWindowTop
{
}
{
border-bottom
:
#eee 1px solid
;
margin-left
:
4px
;
padding
:
3px
;
font-weight
:
bold
;
text-align
:
left
;
font-size
:
12px
;
}
.mesWindowContent
{
}
{
margin
:
4px
;
font-size
:
12px
;
}
.mesWindow .close
{
}
{
height
:
15px
;
width
:
28px
;
border
:
none
;
cursor
:
pointer
;
text-decoration
:
underline
;
background
:
#fff
}
</
style
>
<
script
>
var
isIe
=
(document.all)
?
true
:
false
;
//
设置select的可见状态
function
setSelectState(state)
{
var
objl
=
document.getElementsByTagName('select');
for
(
var
i
=
0
;i
<
objl.length;i
++
)
{
objl[i].style.visibility
=
state;
}
}
function
mousePosition(ev)
{
if
(ev.pageX
||
ev.pageY)
{
return
{x:ev.pageX, y:ev.pageY}
;
}
return
{
x:ev.clientX
+
document.body.scrollLeft
-
document.body.clientLeft,y:ev.clientY
+
document.body.scrollTop
-
document.body.clientTop
}
;
}
//
弹出方法
function
showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var
bWidth
=
parseInt(document.documentElement.scrollWidth);
var
bHeight
=
parseInt(document.documentElement.scrollHeight);
if
(isIe)
{
setSelectState('hidden');}
var
back
=
document.createElement(
"
div
"
);
back.id
=
"
back
"
;
var
styleStr
=
"
top:0px;left:0px;position:absolute;background:#666;
"
+
bWidth
+
"
px;height:
"
+
bHeight
+
"
px;
"
;
styleStr
+=
(isIe)
?
"
filter:alpha(opacity=0);
"
:
"
opacity:0;
"
;
back.style.cssText
=
styleStr;
document.body.appendChild(back);
showBackground(back,
50
);
var
mesW
=
document.createElement(
"
div
"
);
mesW.id
=
"
mesWindow
"
;
mesW.className
=
"
mesWindow
"
;
mesW.innerHTML
=
"
<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>
"
+
wTitle
+
"
</td><td style='1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>
"
+
content
+
"
</div><div class='mesWindowBottom'></div>
"
;
styleStr
=
"
left:
"
+
(((pos.x
-
wWidth)
>
0
)
?
(pos.x
-
wWidth):pos.x)
+
"
px;top:
"
+
(pos.y)
+
"
px;position:absolute;
"
+
wWidth
+
"
px;
"
;
mesW.style.cssText
=
styleStr;
document.body.appendChild(mesW);
}
//
让背景渐渐变暗
function
showBackground(obj,endInt)
{
if
(isIe)
{
obj.filters.alpha.opacity
+=
1
;
if
(obj.filters.alpha.opacity
<
endInt)
{
setTimeout(
function
()
{showBackground(obj,endInt)}
,
5
);
}
}
else
{
var
al
=
parseFloat(obj.style.opacity);al
+=
0.01
;
obj.style.opacity
=
al;
if
(al
<
(endInt
/
100
))
{setTimeout(
function
()
{showBackground(obj,endInt)}
,
5
);}
}
}
//
关闭窗口
function
closeWindow()
{
if
(document.getElementById('back')
!=
null
)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if
(document.getElementById('mesWindow')
!=
null
)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if
(isIe)
{
setSelectState('');}
}
//
测试弹出
function
testMessageBox(ev)
{
var
objPos
=
mousePosition(ev);
messContent
=
"
<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>
"
;
showMessageBox('窗口标题',messContent,objPos,
350
);
}
</
script
>
</
head
>
<
body
>
<
div
style
="padding:20px"
>
<
div
style
="text-align:left"
;
><
a
href
="#none"
onclick
="testMessageBox(event);"
>
弹出窗口
</
a
></
div
>
<
div
style
="text-align:left;padding-left:20px;padding-top:10px"
;
><
select
ID
="Select1"
NAME
="Select1"
><
option
>
下拉
</
option
></
select
>
弹出窗口时会将其隐藏,关闭时会让其显示,目的是在IE中防止弹出的DIV挡不住下拉框
</
div
>
<
div
style
="text-align:center"
;
><
a
href
="#none"
onclick
="testMessageBox(event);"
>
弹出窗口
</
a
></
div
>
<
div
style
="text-align:right"
;
><
a
href
="#none"
onclick
="testMessageBox(event);"
>
弹出窗口
</
a
></
div
>
</
div
>
</
body
>
</
html
>
查看全文
相关阅读:
阅读大道至简的读后感
暑期第四周学习总结
暑假学期第三周总结
暑期学习第二周总结
kuangbin专题 小希的迷宫
Exam 5095 Hopscotch
Exam 5431 //Barareh on Fire
4.19 手写简单循环队列与栈
web安全:xss && csrf
web安全:HTTPS
原文地址:https://www.cnblogs.com/wzyexf/p/911877.html
最新文章
SQLHelper
请教高手 /// <summary>是怎么打出来的?有快捷键吗
ScriptManager(copy)
#region #if c#
maven 私服搭建
maven 多套环境 配置(开发、测试、预发、正式)
maven mirror repository
web服务器 应用 服务器
传输层
eclipse git 整合
热门文章
maven
maven 构建spring ssh mybatis 配置
maven 常用5个命令
删除提示 FOREIGN KEY 约束引用”
JAVA开学测验
第八周学习总结
第七周学习总结
第七周学习总结
第六周学习总结
第五周学习总结
Copyright © 2011-2022 走看看