html中弹出框中加div,用DIV+CSS弹出层回实现弹窗功能

当前位置:我的异常网» HTML/CSS » 用DIV+CSS弹出层回实现弹窗功能

用DIV+CSS弹出层回实现弹窗功能

www.myexceptions.net  网友分享于：2013-09-07  浏览：118次

用DIV+CSS弹出层来实现弹窗功能

用window.open()，还是用window.showdialog弹出对话框都回被浏览器拦截，但是用DIV+CSS得方式实现，可以防止被拦截，于是再网上找到一个例子，原理就是在页面上加2个层，第一个层把页面全部盖住，防止用户点击其他地方，第二个层是一个显示内容的层，代码如下：

LIGHTBOX EXAMPLE

html, body {

height: 100%;

width: 100%;

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 50%;

border: 8px solid #D6E9F1;

z-index:1002;

}

.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:210px

}

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';

}

打开

关闭

文章评论