js控制弹窗

a575292877

浏览: 10734 次
性别:
来自: 哈尔滨

最近访客更多访客>>

thomasland

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js div

<!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)" onclick="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 onclick="deletePolylgon();">删除区域</a>
<a onclick="addArea('showResult',-1);">增加</a>
<a onclick="deleteArea()">删除</a>
<a href="javascript:void(0)"
onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
关闭</a>


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