<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>LIGHTBOX EXAMPLE</
title
>
<
style
>
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.6; opacity:.60; filter: alpha(opacity=60); }
.white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; }
</
style
>
<
script
>
function one(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function two(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}
</
script
>
</
head
>
<
body
>
<
p
>可以根据自己要求修改css样式
<
a
href
=
"javascript:void(0)"
onclick
=
"one()"
>点击这里打开窗口</
a
>
</
p
>
<
div
id
=
"light"
class
=
"white_content"
>
This is the lightbox content.
<
a
href
=
"javascript:void(0)"
onclick
=
"two()"
>Close</
a
>
</
div
>
<
div
id
=
"fade"
class
=
"black_overlay"
>
</
div
>
</
body
>
</
html
>