HTML CSS 弹出框样式

最新推荐文章于 2024-09-19 18:04:51 发布
Fu88
最新推荐文章于 2024-09-19 18:04:51 发布
阅读量2.8k
点赞数
HTML 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
HTML CSS 弹出框样式
弹出框效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/* 以下是 最外层 样式设置*/
.div_cm {
	width:710px;
	text-align:center;
	position:absolute;
	z-index:10;
	background-color:#B7D2FB;
	__background-color:#DAE8FE;
}
/* 以下是 层中所有A标签 样式设置*/
.div_cm a {
	color:#1774F0;
	text-decoration:none;
	padding:0 6px 0 6px;
	border:0px;
}
.div_cm a:hover {
	color:#0B5ED9;
	background-color:#7BADF9;
}
/* 以下是 title 样式设置*/
.div_cm .div_title {
	width:98%;
	height:20px;
	line-height:20px;
	font-size:12px;
	margin-top:2px;
	margin-left: auto;
	margin-right: auto;
	text-align:right;
	font-weight:bold;
	color:#1774F0;
}
/*以下是 table 外层的div 样式， 
* 设置下拉框，最小height，最大height，
* 设置div在外层div中左右居中
* 设置 table 的总宽度，以及下边的间距
*/
.div_cm .div_tab {
	width:97%;
	margin-bottom:8px;
	min-height:20px;
	max-height:198px;
	border:1px solid #666;
	overflow-y:auto;
	cursor:default;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	background-color:#FFF;
	color:#234E56;
}
/* 以下是 table 样式设置 */
.div_cm .table_cm {
	width:100%;
	font-size:13px;
	word-break:break-all;
	word-wrap:break-word;
}
/* 以下是td 样式设置 只有上边框 、 左边框
* 并 第一行的上边框没有
* 并 第一列的左边框没有 */
.table_cm td {
	padding:2px;
}
.table_cm .tr_top td {
	border-top:0px;
}
.table_cm .td_txt {
	border-top:1px solid #666;
	border-left:1px solid #666;
}
.table_cm .td_left {
	border-top:1px solid #666;
	border-left:0px solid #666;
}
</style>
</head>
<body>
<script src="jquery-1.5.js" type="text/javascript"></script> 
<script type="text/javascript">
	jQuery(document).ready(function() {
		var div = jQuery("#div_back");
		div.css({ 'width': window.screen.width, 'height': window.screen.height });
		div.fadeTo('slow', 0.5);
	});
</script>
<div id="div_back" style="position:absolute; top:0px; left:0px; filter:alpha(opacity=30);opacity:0.8; background-color:#CCF; width:800px; height:500px;z-index:8"></div>
<div class="div_cm">
  <div class="div_title"> <span style="float:left; margin-left:5px;">选择收货人</span> <a href="#">X</a> </div>
  <div class="div_tab">
    <table border="0" cellspacing="0" cellpadding="0" class="table_cm">
      <tr class="tr_top">
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
      </tr>
      <tr>
        <td width="10%" class="td_left">姓名哦杨</td>
        <td width="13%" class="td_txt">呼和浩特市</td>
        <td width="17%" class="td_txt">0755-12345678</td>
        <td width="15%" class="td_txt">15012345678</td>
        <td class="td_txt">地址地址 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地址 </td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>