简约慷慨CSS对话框/提示框/弹出框
简约大方CSS对话框/提示框/弹出框
项目中往往会遇到弹出框，对话框，提示框等，下面就是一款原创的简单大方的提示框形式样式素材，基本效果如图：
此种提示框采用纯CSS样式编写，修改及美化简单，无需任何图片，首先是html代码部分：
<div class="dialogDiv"> <div class="dialogBox"> <div class="header"><h3>系统运行错误</h3></div> <div class="content"> <ul> <li><h3>系统运行过程中出现异常，请与系统管理员联系。</h3></li> <li><h3>以下是错误的详细信息：</h3></li> <li><%=exception.getMessage()%></li> <li>点击“返回”按钮返回上一次操作。</li> <li><input type="button" onclick="javascript:history.go(-1);" value="返回" class="button gray small"/></li> </ul> </div> </div> </div>
1.提示框由内外两部分组成，最外侧是一层Div，此DIv由样式“dialogDiv”控制，dialogDiv样式为：
.dialogDiv {
margin: 0 auto;
text-align: center;
width: 500px;
}
dialogDiv 样式的作用是控制提示框的大小及居中对齐。
2.然后就是内部提示框框架，最外侧是框架，内层由header与content组成，分别是标题栏与详细内容。
3.提示框框架由样式“dialogBox”控制，“dialogBox”样式的作用是确定上下间距、边框样式及内容对齐方式，样式如下：
.dialogBox {
margin: auto 0;
margin-top: 60px;
text-align: center;
border: 1px solid #d2d2d2;
}
4.标题栏与详细内容分别由“header”与“content”样式控制，详细内容内部由<ul>与<li>列表显示内容。
总体结构如图：
注：为了方便大家了解结构我就把外侧两层div间距画的大了些，实际上是贴合在一起的。
以下就是这个基本提示框的所有代码，下面还会有在此提示框基础上的修改及内容丰富版本。
Html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>提示框</title>
<link rel="stylesheet" type="text/css" href="styles/button.css">
<script src="js/jquery-1.9.0.js"></script>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,table,th,td,button,iframe
{
margin: 0;
padding: 0;
}
ul,li {
list-style-type: none;
}
.dialogDiv {
margin: 0 auto;
text-align: center;
width: 500px;
}
.dialogBox {
margin: auto 0;
margin-top: 60px;
text-align: center;
border: 1px solid #d2d2d2;
}
.dialogBox .header {
background: #4794c5;
margin: 2px;
height: 26px;
text-align: left;
}
.dialogBox .header h3 {
font-size: 14px;
color: #ffffff;
padding-left: 6px;
padding-top: 4px;
}
.dialogBox .content {
font-size: 12px;
color: #6e6d6d;
background: #ffffff;
margin: auto 0;
margin-top: 8px;
}
.dialogBox .content ul {
font-size: 12px;
color: #6e6d6d;
background: #ffffff;
margin-bottom: 8px;
}
.dialogBox .content ul li {
font-size: 12px;
color: #6e6d6d;
background: #ffffff;
margin: 6px;
}
</style>
</head>
<body>
<div class="dialogDiv">
<div class="dialogBox">
<div class="header"><h3>系统运行错误</h3></div>
<div class="content">
<ul>
<li><h3>系统运行过程中出现异常，请与系统管理员联系</h3></li>
<li><h3>以下是错误的详细信息：</h3></li>
<li>${此处输出你的异常信息}</li>
<li>点击“返回”按钮返回上一次操作。</li>
<li><input type="button" onclick="javascript:history.go(-1);" value="返回" class="button gray small"/></li>
</ul>
</div>
</div>
</div>
</body>
</html>
附件附赠一份按钮样式，可以下载到本地再进行修改及优化，代码已经通过测试可以使用。
对于仅用于提示相应信息来说这款简约提示框已经够用了，但是还是无法满足更多的使用情况，下面就在此基础上进行修改，从而支持更多使用情况。
1.可关闭的弹出提示框：
只需要在标题栏右侧添加一个关闭按钮即可。
1)首先将标题栏一分为二，如图所示：
2)标题栏1左对齐，标题栏2右对齐，标题栏2里放置关闭按钮。
3)完成后代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>提示框</title>
<link rel="stylesheet" type="text/css" href="styles/button.css">
<script src="js/jquery-1.9.0.js"></script>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,table,th,td,button,iframe
{
margin: 0;
padding: 0;
}
ul,li {
list-style-type: none;
}
.dialogDiv {
margin: 0 auto;
text-align: center;
width: 500px;
}
.dialogBox {
margin: auto 0;
margin-top: 60px;
text-align: center;
border: 1px solid #d2d2d2;
}
.dialogBox .header {
background: #4794c5;
margin: 2px;
height: 26px;
text-align: left;
}
.dialogBox .header .header_left {
float: left;
}
.dialogBox .header .header_right {
float: right;
text-align: center;
width: 24px;
}
.dialogBox .header .header_right .close{
margin-top: 4px;
}
.dialogBox .header h3 {
font-size: 14px;
color: #ffffff;
padding-left: 6px;
padding-top: 4px;
}
.dialogBox .content {
font-size: 12px;
color: #6e6d6d;
background: #ffffff;
margin: auto 0;
margin-top: 8px;
}
.dialogBox .content ul {
font-size: 12px;
color: #6e6d6d;
background: #ffffff;
margin-bottom: 8px;
}
.dialogBox .content ul li {
font-size: 12px;
color: #6e6d6d;
background: #ffffff;
margin: 6px;
}
</style>
</head>
<body>
<div class="dialogDiv">
<div class="dialogBox">
<div class="header">
<div class="header_left">
<h3>系统运行错误</h3>
</div>
<div class="header_right">
<a href="javascript:;" onclick="javascript:你的关闭方法;"><img class="close" src="images/close.png"/></a>
</div>
</div>
<div class="content">
<ul>
<li><h3>系统运行过程中出现异常，请与系统管理员联系</h3></li>
<li><h3>以下是错误的详细信息：</h3></li>
<li>${此处输出你的异常信息}</li>
<li>点击“返回”按钮返回上一次操作。</li>
<li><input type="button" onclick="javascript:你的关闭方法;" value="关闭" class="button gray small" /></li>
</ul>
</div>
</div>
</div>
</body>
</html>
附件为全部代码。
2.垂直水平居中提示框
1)在原有样式基础上对“dialogDiv”及“dialogBox”两个样式进行修改，使对话框垂直居中。
2)两个样式修改成如下内容：
.dialogDiv {
margin: 0 auto;
text-align: center;
width: 500px;/* 提示框宽度 */
height: 300px;/* 提示框高度 */
position: absolute;
left:50%;
top:50%;
margin-left:-250px;/* 宽度的一半 */
margin-top:-100px;/* 高度的一半 */
}
.dialogBox {
margin: auto 0;
text-align: center;
border: 1px solid #d2d2d2;
}
3)修改后页面效果：
3.右下角添加美化图片
1)可以在提示框的右下角部分添加一张图片来美化展示效果，主要是修改“content”样式，在其中添加背景图片。
2)去掉原来“content”、“ul”与“li”样式里的白色(#fffff)背景颜色。
3)全部修改完成代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>提示框</title>
<link rel="stylesheet" type="text/css" href="styles/button.css">
<script src="js/jquery-1.9.0.js"></script>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,table,th,td,button,iframe
{
margin: 0;
padding: 0;
}
ul,li {
list-style-type: none;
}
.dialogDiv {
margin: 0 auto;
text-align: center;
width: 500px;
position: absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-100px;
}
.dialogBox {
margin: auto 0;
text-align: center;
border: 1px solid #d2d2d2;
}
.dialogBox .header {
background: #4794c5;
margin: 2px;
height: 26px;
text-align: left;
}
.dialogBox .header .header_left {
float: left;
}
.dialogBox .header .header_right {
float: right;
text-align: center;
width: 24px;
}
.dialogBox .header .header_right .close{
margin-top: 4px;
}
.dialogBox .header h3 {
font-size: 14px;
color: #ffffff;
padding-left: 6px;
padding-top: 4px;
}
.dialogBox .content {
font-size: 12px;
color: #6e6d6d;
margin: auto 0;
margin-top: 8px;
background:#ffffff url(images/important.png) no-repeat right bottom;
}
.dialogBox .content ul {
font-size: 12px;
color: #6e6d6d;
margin-bottom: 8px;
}
.dialogBox .content ul li {
font-size: 12px;
color: #6e6d6d;
margin: 6px;
}
</style>
</head>
<body>
<div class="dialogDiv">
<div class="dialogBox">
<div class="header">
<div class="header_left">
<h3>系统运行错误</h3>
</div>
<div class="header_right">
<a href="javascript:;" onclick="javascript:你的关闭方法;"><img class="close" src="images/close.png"/></a>
</div>
</div>
<div class="content">
<ul>
<li><h3>系统运行过程中出现异常，请与系统管理员联系</h3></li>
<li><h3>以下是错误的详细信息：</h3></li>
<li>${此处输出你的异常信息}</li>
<li>点击“返回”按钮返回上一次操作。</li>
<li><input type="button" onclick="javascript:你的关闭方法;" value="关闭" class="button gray small" /></li>
</ul>
</div>
</div>
</div>
</body>
</html>
4)完成后展示效果如图：
当然，我选得图片有点丑，大家可以自己选一些跟自己项目风格比较搭配的进行组合，最后是源代码文件下载。
1 楼
steafler
19 小时前
很不错，楼主加油
2 楼
tkl211
17 小时前
非常清爽，期待楼主慢慢增加其他功能，哈哈
3 楼
公爵600
13 小时前
高端大气上档次！！！