js控制弹窗

最新推荐文章于 2023-01-25 11:06:38 发布

a575292877

最新推荐文章于 2023-01-25 11:06:38 发布

阅读量146

点赞数

分类专栏： js 文章标签： js div

本文链接：https://blog.csdn.net/a575292877/article/details/84600748

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<link rel="stylesheet" href="C:\Users\Administrator\Desktop\base.css" />
<style>
/*基本样式*/
body,html {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}

#allmapdw {
height: 100%;
overflow: hidden;
}

#result {
border-left: 1px dotted #999;
height: 100%;
width: 200px;
position: absolute;
top: 0px;
right: 0px;
font-size: 12px;
background-color: #F4F2EE;
}
ul.ztree {
margin-top: 0px;
border: 0px solid #617775;
overflow-y: auto;
height: auto;
overflow-x: auto;
margin-bottom: 1px;
}

.black_overlay{
display: none; position: absolute;
top: 0%; left: 0%; width: 100%;
height: 100%; background-color: black;
z-index:1001; -moz-opacity: 0.8;
opacity:.80; filter: alpha(opacity=80);
}
.white_content {
display: none; position: absolute;
top: 25%; left: 25%; width: 50%;
height: 50%;
padding: 6px; border: 7px solid orange; background-color: white; z-index:1002; overflow: auto; }
/*div table*/
.mytable {
padding: 0;
margin: 0;
border-collapse:collapse;
}

td {
border: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
th {
border: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

</style>
</head>
<body>
<p>可以根据自己要求修改css样式<a href="javascript:void(0)" οnclick="document.getElementById

('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>
<div id="light" class="white_content">

<table class="mytable" id="showResult" width="100%">
<caption align="top" style="font-weight: bold; font-size: 10px;">
当前区域各部门负责人列表
</caption>
<thead>
<tr align="center">
<th width="10%" style="font-weight: bold;">
<input id="allCkb" type="checkbox" />
</th>
<th width="30%" style="font-weight: bold; font-size: 12px;">
人员
</th>
<th width='30%' style="font-weight: bold; font-size: 12px;">
部门
</th>
<th width='30%' style="font-weight: bold; font-size: 12px;">
联系方式
</th>
</tr>
</thead>
</table>
<br />

<table class="mytable" width="100%">

<tr>
<td class="mytd">
人员：
<input type="text" name="infoUser.userName" id="userName" />
</td>
<td class='mytd'>
<label>
部门：
</label>
<select name="infoUser.departmentId" id="selectId">
<option value="0">
请选择
</option>
<s:iterator value="thDepartmantList" var="dep">
<option value="<s:property value='#dep.departmentId'/>">
<s:property value='#dep.departmentName' />
</option>
</s:iterator>
</select>
</td>
<td class='mytd'>
<label>
联系方式：
</label>
<input type="text" name="infoUser.userPhone" id="userPhone" />
</td>
</tr>
</table>
</form>
<a οnclick="deletePolylgon();">删除区域</a>
<a οnclick="addArea('showResult',-1);">增加</a>
<a οnclick="deleteArea()">删除</a>
<a href="javascript:void(0)"
οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
关闭</a>

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

a575292877

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js控制弹窗

LIGHTBOX EXAMPLE /*基本样式*/body,html { width: 100%; height: 100%; overflow: hidden; margin: 0;}#allmapdw { height: 100%; overflow: hidden;}#result { border...
复制链接

扫一扫