html 层向上弹出,html弹出层的实现

LIGHTBOX EXAMPLE

* {

margin:0;

padding:0

}

html, body {

height: 100%;

width: 100%;

font-size:12px

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 50%;

padding: 6px 16px;

border: 12px solid #D6E9F1;

background-color: white;

z-index:1002;

overflow: auto;

}

.black_overlay {

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color:#f5f5f5;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

.close {

float:right;

clear:both;

width:100%;

text-align:right;

margin:0 0 6px 0

}

.close a {

color:#333;

text-decoration:none;

font-size:14px;

font-weight:700

}

.con {

text-indent:1.5pc;

line-height:21px

}

function show(tag){

var light=document.getElementById(tag);

var fade=document.getElementById('fade');

light.style.display='block';

fade.style.display='block';

}

function hide(tag){

var light=document.getElementById(tag);

var fade=document.getElementById('fade');

light.style.display='none';

fade.style.display='none';

}

打开1

打开2

关闭

内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

关闭

内容2