项目中往往会遇到弹出框，对话框，提示框等，下面就是一款原创的简单大方的提示框形式样式素材，基本效果如图：
此种提示框采用纯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;
background: #ffffff;
}
.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;
background: #ffffff;
}
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;
background: #ffffff;
}
.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)完成后展示效果如图：
当然，我选得图片有点丑，大家可以自己选一些跟自己项目风格比较搭配的进行组合，最后是源代码文件下载。
相关推荐
在实现弹出对话框时，我们需要创建一个包含对话框元素的容器，例如`<div>`，并设置相应的ID或类名以便于CSS和JavaScript操作。例如： ```html 自定义对话框</h2> 请输入内容"> 关闭</button> </div> ``` 接着...
在本资源"jQuery弹出对话框和提示框动画插件.zip"中，包含了一些用于创建弹出对话框和提示框的jQuery特效和插件，非常适合那些希望增强网站用户交互体验的开发者。 首先，我们要理解jQuery中的弹出对话框和提示框的...
【简约大方的对话框样式】是一种常见的用户界面设计元素，旨在提供一种优雅、不突兀的方式与用户进行交互。在软件或网页应用中，对话框通常用于显示警告、询问、确认或者提供信息，它们需要既能吸引用户的注意力，又...
《jQuery弹出对话框与提示框动画插件详解》 在网页开发中，交互性和用户体验是至关重要的元素，其中对话框和提示框的使用频繁且关键。jQuery作为一款广泛使用的JavaScript库，为开发者提供了丰富的功能，包括弹出...
纯CSS实现div弹出对话框 可以应用于C#，.net 里面。 页面比较好看。
在JavaScript编程中，创建自定义菜单、对话框和提示框是增强用户交互体验的重要...在提供的"JS弹出自定义菜单+对话框+提示框大全"压缩包中，可能包含了实现这些功能的代码示例和教程，你可以通过学习和实践来加深理解。
标题中的“JS弹出自定义菜单+对话框+提示框大全”指的是使用JavaScript语言实现的用户界面元素，包括自定义菜单、对话框和提示框。这些是网页交互中常见的功能，用于增强用户体验，提供信息反馈或者获取用户输入。 ...
用css实现简单的对话框的样式
本文将深入探讨如何使用CSS3来创建具有吸引力和功能性的弹出提示框。 首先，让我们了解弹出提示框的基本结构。一个简单的弹出提示框通常由HTML元素组成，如`<div>`，这个元素可以设置为绝对定位以便在页面上的特定...
HTML5是现代网页开发的核心标准，它为开发者提供了...通过学习和理解这些代码，你可以掌握如何在HTML5环境下创建具有文字提示的手机对话框弹出框特效。实践中，可以根据项目需求进行调整和优化，以达到最佳的用户体验。
在网页设计中，对话框（也称为提示框或气泡）是常见的用户界面元素，用于显示消息、通知或与用户进行交互。CSS3是层叠样式表的第三版，提供了许多增强的特性和功能，使得创建动态且富有表现力的对话框变得更为简单。...
在IT行业中，弹出框是一种常见的用户界面元素，它用于向用户提供信息、请求确认或接收输入。"////////////漂亮的弹出框/////////"这个标题暗示我们将讨论关于美化和优化弹出框设计的知识点。在描述中反复提到“弹出...
在网页设计中，弹出框是一种常见的交互元素，用于显示重要的信息、提示或者用户需要填写的数据。本主题聚焦于利用CSS3动画过渡效果和jQuery库创建动态弹出框插件。这种结合使得弹出框不仅功能强大，还能提供平滑、...
在移动设备上，提供良好的用户体验是至关重要的，而弹出提示框是用户交互中的常见元素。这个名为"jQuery适用于手机端的弹出提示框代码.zip"的压缩包包含了一个专门针对手机端优化的jQuery弹出提示框解决方案。下面，...
- 提示信息：在特定事件发生时，如错误发生或操作成功，使用提示框通知用户。 总结，jQuery对话框和提示代码是提升用户体验和交互性的重要工具。通过灵活运用`jQuery UI`提供的对话框功能，可以创建各种定制化的...
本文将详细讲解如何使用jQuery实现一个点击按钮弹出对话框窗口提示的插件，以便用户在执行关键操作前进行确认或取消。 首先，我们需要引入jQuery库。在`index.html`文件中，添加以下代码片段来引入jQuery： ```...
css js 弹出框
在网页设计和开发中，`div` 弹出框、对话框和模态窗口是创建交互式用户体验的重要组成部分。这些元素通常用于显示警告、询问用户输入或者提供额外的信息，而不会中断用户对主要页面的浏览。本文将深入探讨这些概念，...