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>
分享到:
相关推荐
alert和confirm弹出框样式美化,可自定义颜色和样式,无须调用浏览器自带弹框。
html5 css3简单的遮罩弹出框动态效果
包含了19种html5的弹出框样式
纯html+css代码编写手机端弹出层样式,其中包含确定和取消按钮
CSS3+HTML5 3D弹出框效果!里面包括多个弹出样式供您选择!
HTML5 css3制作的智能手机风格的弹出提示框,这些提示框一种有四种类型:1、操作成功、2、误提示、3、正在加载、4、通用提示。鼠标点击对应的演示按钮,即可显示出提示效果,每个提示框中的内容都具有动画效果。这些...
自定义基础弹出框,可以在此基础上自定义出各类自己需要的弹出框
addMessage()函数,旨在构造弹出框样式,创建div,addToCart()函数以ajax添加信息,之中用到addToCartResponse()函数,处理返回的信息,在购物页面,点击加入购物车 触发flow.php?step=cart’;在这里触发addMessage...
js alert confirm样式弹出框.zip
这是12中风格各异的弹出消息提示框效果,使用html5和css3 animation属性制作,有各种旋转、翻转、伸展特效。效果非常华丽。
function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $(“#backgroundPopup”).css({ “opacity”: “0.7” }); $(“#backgroundPopup”).fadeIn(“slow”); $(“#popupContact”)....
clazz: 弹出框的css类名 cancelStr: 取消按钮的按钮名 sureStr: 确定按钮的按钮名 title: 弹出框的标题 content: 弹出框内容 header: 表示头部的html模板 okCallback:确定按钮的回调函数【alert框时只有这个回调...
但也不算难看(本个界面设计能力较差:-)...)如果你 想更改窗口样式也很容易,组件采用的是静态模板来设计的窗口的样式,你只要更改lhgdialog.html里body 之间的HTML代码,再相应改下lhgdialog.css样式表文件即可。...
纯javascript写的伸缩的两级菜单,并加有CSS样式,当鼠标点击的下拉菜单时弹出二组菜单。
自定义弹出输入框,直接使用,只需修改自己的弹出框的样式及框内操作即可
其中,ios6alert.js是插件主要部分的js,ios6alert.css中定义的是对话框的默认样式,可以根据需要进行编辑。 对话框的HTML结构是通过js动态添加到页面上的,所以不需要在页面上额外准备内容。 只需要运行$("body")....
只是上传了简单的提示框dom,和相应的事件。需要自己写css文件,设定样式。
JSmodal Javascript警报,确认和提示的模式弹出框JSmodal.js 必须先处理模式消息框,表单或对话框,然后才能继续使用应用程序的其余部分。 Javascript中的示例是alert, confirm, and prompt语句。 这些命令非常有用...
HTML5 弹出框、可关闭的浮动层代码,弹出一个新的div,支持关闭功能,很简单,没有美化,样式如演示截图示,看上去比较基础,挺简单的样式。与传统的HTML弹出框几乎没啥区别,只不过是基于HTML5技术实现的。