首页 > 代码库 > 弹出层
弹出层
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
.black-mask {
Z-INDEX: 999; POSITION: absolute; FILTER: alpha(opacity=50); WIDTH: 100%; DISPLAY: none; BACKGROUND: #000; HEIGHT: 100%; TOP: 0px; LEFT: 0px; opacity: .5; -moz-opacity: .5
}
.pop {
Z-INDEX: 1000; POSITION: absolute; PADDING-BOTTOM: 8px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; DISPLAY: none; FONT-FAMILY: Microsoft Yahei; BACKGROUND: url(../images/left_top.jpg); TOP: 50%; PADDING-TOP: 8px; LEFT: 50%; border-radius: 4px
}
.pop-inner {
WIDTH: 745px; BACKGROUND: #fff
}
.pop-hd {
POSITION: relative; HEIGHT: 100%; OVERFLOW: hidden
}
.pop-hd .pop-title {
LINE-HEIGHT: 43px; PADDING-LEFT: 15px; BACKGROUND: #ebebeb; HEIGHT: 43px; COLOR: #414642; FONT-SIZE: 14px; OVERFLOW: hidden
}
.pop-con {
PADDING-BOTTOM: 20px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; PADDING-TOP: 20px
}
.pop-log {
WIDTH: 705px; OVERFLOW: hidden
}
.pop-log-left {
PADDING-BOTTOM: 0px; PADDING-LEFT: 35px; WIDTH: 374px; PADDING-RIGHT: 70px; FLOAT: left; BORDER-RIGHT: #e0e0e0 1px solid; PADDING-TOP: 10px
}
</style>
<body>
<input type="button" value=http://www.mamicode.com/"多媒体调度" onclick="showDIv();"/>
<DIV id=‘black-mask‘ class=‘black-mask‘></DIV>
<DIV style="TOP: 134px; LEFT: 300px;border:1px solid red;" id=‘popDiv‘ class=‘pop‘>
<DIV class=‘pop-inner‘>
<DIV class=pop-hd>
<DIV class=‘pop-title‘>坐席选择!</DIV>
</DIV>
<DIV class=‘pop-con‘>
<DIV id=‘log‘ class=‘pop-log‘>
<DIV class=‘pop-log-left‘> 写 tab 的 地方</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</body>
<script>
function showDIv(){
document.getElementById(‘black-mask‘).style.display="block";
document.getElementById(‘popDiv‘).style.display="block";
}
</script>
</html>
弹出层