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
>
查看全文
相关阅读:
leetcode 203. Remove Linked List Elements 删除链表中的某个值 ---------- java
leetcode 202. Happy Number 判断一个数是否是“Happy Number” ---------- java
leetcode 201. Bitwise AND of Numbers Range 求范围中,每一位都是1的数 ---------- java
js获取Html元素的实际宽度高度
jquery中this与$this的区别
find()与children()方法的区别
jquery创建动态的div
兼容性问题
bootstrap插件小记
禁掉a链接的几种方法
原文地址:https://www.cnblogs.com/wzyexf/p/911877.html
最新文章
c++要点
C语言文件读写
定时任务卡死问题排查
Linux增加虚拟内存
c#中使用log4net
使用注解校验
常用排序算法
图
C语言基础语法回顾
链表
热门文章
java内存泄漏问题排查
微信的 rpx
css3弹性盒子
leetcode 210. Course Schedule II 课程计划 II ---------- java
leetcode 209. Minimum Size Subarray Sum 找出最小的和的长度 ---------- java
leetcode 208. Implement Trie (Prefix Tree) 设计前缀树 ---------- java
leetcode 207. Course Schedule 课程计划 ---------- java
leetcode 206. Reverse Linked List 反转链表 ---------- java
leetcode 205. Isomorphic Strings 判断两个字符串能否互相转换 ---------- java
leetcode 204. Count Primes 找出素数的个数 ---------- java
Copyright © 2011-2022 走看看