html如何用JS自动弹出一个DIV

JavaScript017

html如何用JS自动弹出一个DIV,第1张

也就先做一个DIV。里面的内容都做好。

此DIV背后加一个mask层。

把这个DIv默认设置为隐藏。

JS里加一个定时器,每隔一分钟,设置为这个DIv的css样式中的display=block

var 按钮=document...\x0d\x0avar div=document....\x0d\x0a\x0d\x0a//点击按钮弹出div 在点击按钮关闭该div \x0d\x0a按钮.onclick=function()\x0d\x0a{\x0d\x0aif(div.style.display=="none")\x0d\x0a{\x0d\x0adiv.style.display="block"\x0d\x0a}\x0d\x0aelse\x0d\x0a{\x0d\x0adiv.style.display="none"\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0a//点击其他地方关闭div\x0d\x0adocument.onclick=function()\x0d\x0a{\x0d\x0adiv.style.display="none"\x0d\x0a}\x0d\x0a\x0d\x0a//为了防止点击div 也关闭div 所以这里要防止冒泡\x0d\x0adiv.onclick=function()\x0d\x0a{\x0d\x0areturn false\x0d\x0a}\x0d\x0a\x0d\x0a希望对你有所帮助

弹出div显示遮罩层的效果,想必大家都有见到过吧,下面有个示例,大家可以参考下

代码如下:

//--------------------弹出层-------------------

//popDivId:弹出层div的ID

//dragDivId:用于拖动div的ID

//isShowMask:是否显示遮罩层

function

popDivShow(popDivId,

dragDivId,

isShowMask)

{

if

(isShowMask)

{

creatMask(popDivId)

}

var

oWins

=

document.getElementById(popDivId)

var

oWins_title

=

document.getElementById(dragDivId)

var

bDrag

=

false

var

disX

=

disY

=

0

oWins.style.display

=

"block"

oWins_title.onmousedown

=

function(event)

{

var

event

=

event

||

window.event

bDrag

=

true

disX

=

event.clientX

-

oWins.offsetLeft

disY

=

event.clientY

-

oWins.offsetTop

this.setCapture

&&

this.setCapture()

return

false

}

document.onmousemove

=

function(event)

{

if

(!bDrag)

return

var

event

=

event

||

window.event

var

iL

=

event.clientX

-

disX

var

iT

=

event.clientY

-

disY

var

maxL

=

document.documentElement.clientWidth

-

oWins.offsetWidth

var

maxT

=

document.documentElement.clientHeight

-

oWins.offsetHeight

iL

=

iL

<

0

?

0

:

iL

iL

=

iL

>

maxL

?

maxL

:

iL

iT

=

iT

<

0

?

0

:

iT

iT

=

iT

>

maxT

?

maxT

:

iT

oWins.style.marginTop

=

oWins.style.marginLeft

=

0

oWins.style.left

=

iL

+

"px"

oWins.style.top

=

iT

+

"px"

return

false

}

document.onmouseup

=

window.onblur

=

oWins_title.onlosecapture

=

function()

{

bDrag

=

false

oWins_title.releaseCapture

&&

oWins_title.releaseCapture()

}

}

//

隐藏弹出层

function

popDivHidden(popDivId)

{

var

oWins

=

document.getElementById(popDivId)

oWins.style.display

=

"none"

window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"))

}

//

获取弹出层的zIndex

function

getZindex(popDivId)

{

var

popDiv

=

document.getElementById(popDivId)

var

popDivZindex

=

popDiv.style.zIndex

return

popDivZindex

}

//

创建遮罩层

function

creatMask(popDivId)

{

//

参数w为弹出页面的宽度,参数h为弹出页面的高度,参数s为弹出页面的路径

var

maskDiv

=

window.parent.document.createElement("div")

maskDiv.id

=

"maskDiv"

maskDiv.style.position

=

"fixed"

maskDiv.style.top

=

"0"

maskDiv.style.left

=

"0"

maskDiv.style.zIndex

=

getZindex(popDivId)

-

1

maskDiv.style.backgroundColor

=

"#333"

maskDiv.style.filter

=

"alpha(opacity=70)"

maskDiv.style.opacity

=

"0.7"

maskDiv.style.width

=

"100%"

maskDiv.style.height

=

(window.parent.document.body.scrollHeight

+

50)

+

"px"

window.parent.document.body.appendChild(maskDiv)

maskDiv.onmousedown

=

function()

{

window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"))

}

}