js弹出div并显示遮罩层

JavaScript015

js弹出div并显示遮罩层,第1张

弹出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"))

}

}

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

此DIV背后加一个mask层。

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

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

显示层：

css：

.showdiv

{

width: 100%

height: auto

position: absolute

left: 0

top: 0

z-index: 999

display: none

}

.count_div

{

width: 500px

height: 400px

margin-top: 120px

margin-left: auto

margin-right: auto

margin-bottom: 0

border: 1px solid #aaaaaa

background: #fff

}

.brg

{

width: 100%

background: #ededed

position: absolute

top: 0

left: 0

filter: alpha(opacity=60)

-moz-opacity: 0.6

opacity: 0.6

position: absolute

top: 0

left: 0

display: none

z-index: 998

}

js:

function close () {

$("#brg").css("display", "none")

$("#showdiv").css("display", "none")

}

function show() {

$("#brg").css("display", "none")

$("#div_show").css("display", "none")

}

　$(document).bind('keydown', 'esc',function (evt){

//关闭层代码

close ()

return false})

html：

<!--遮罩层-->

<div class="brg" id="brg">

</div>

<!--显示层-->

<div class="showdiv" id="div_order">

<div class="count_div" id="div_order_count">

内容

</div>

</div>

在网上找一个“jquery.hotkeys.js”的js包，里面都是jquery整理好的热键，

引入jquery包。

$(document).bind('keydown', 'esc',function (evt){

//关闭层代码

return false})

手敲，未测试，应该不会有太大问题，根据自己内容修改