点击文字弹出一个DIV层窗口代码

来源：互联网发布：php医院预约挂号源码编辑：程序博客网时间：2024/06/01 07:48

点击div，会出现弹出层代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>点击文字弹出一个DIV层窗口代码</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;

z-index:1001;
background-color: rgba(229,235,238,0.8);
}
.white_content {
display: none;
position: absolute;

top: 25%;
left: 35%;
width: 632px;
height: 494px;
padding: 20px;
border: 1px solid #adacac;
background-color: white;
z-index:1002;
overflow: auto;
}
.sj_con {
padding: 0px;
height: 460px;
width: 600px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;
border: 1px solid #adacac;
}
.selt {
height: 40px;
width: 335px;
margin-top: 0;
float:left;
padding: 0px;
margin-right: 0px;
margin-bottom: 10;
margin-left: 135px;
}
.seltt {
height: 50px;
width: 354px;
margin-top:45px;
float:left;
padding: 0px;
margin-right: 0px;
margin-bottom: 10;
margin-left: 135px;
}
.lfbt {
font-size: 17px;
line-height: 40px;
color: #FFF;
background-color: #009ddc;
text-align: center;
float: left;
height: 40px;
width: 123px;
}
.lfbt a {
color: #FFF;
text-decoration: none;
}
.qb2 {height: 25px;
width: 220px;
border: 1px solid #ededed;color: #323131;
}
.selt span {
font-size: 17px;
line-height: 25px;
text-align:left;
margin-left: 0px;
padding: 0px;
float: left;
height: 25px;
width: 60px;
color: #323131;
}
select {
height: 25px;
width: 220px;
border: 1px solid #ededed;color: #323131;
}
.qb1 {
padding: 0px;
float: left;
height: 25px;
width: 220px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left:10px;
border: 1px solid #323131;
}

</style>
</head>
<body>
<p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>
<div id="light" class="white_content">
<div class="sj_con">

<div class="selt" style="margin-top:70px;">
<span>数据集:</span>
<div class="qb1">
<input type="text"placeholder="上传本地数据" class="qb2"/>
</div>

</div>

<div class="selt">
<span>领域:</span>
<div class="qb1">
<select>
<option value="wl">物流</option>
<option value="ds">电商</option>
<option value="yx">医学</option>
<option value="nt">媒体</option>
</select>
</div>
</div>

<div class="selt">
<span>时间:</span>
<div class="qb1">
<input type="text" class="qb2"/>
</div>

</div>

<div class="selt">
<span>来源:</span>
<div class="qb1">
<select>
<option value="zf">政府</option>
<option value="gj">国家</option>
<option value="yx">地球</option>
<option value="nt">火星</option>
</select>
</div>
</div>

<div class="selt">
<span>时间:</span>
<div class="qb1">
<input type="text" class="qb2"/>
</div>

</div>

<div class="seltt">
<div class="lfbt"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">提交</a></div>
<div class="lfbt" style="float:right;"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</a></div>
</div>

</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

阅读全文

0 0