HTML CSS 弹出框式样
日期：2014-05-17 浏览次数：20962 次
HTML CSS 弹出框样式
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-123
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
