??????? 项目中往往会遇到弹出框，对话框，提示框等，下面就是一款原创的简单大方的提示框形式样式素材，基本效果如图：
???????? 此种提示框采用纯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.可关闭的弹出提示框：
?????
