您的位置: 首页  >  文章  >  简约大方CSS对话框/提示框/弹出框

简约大方CSS对话框/提示框/弹出框

分类: 文章 • 2024-12-10 17:45:34

        项目中往往会遇到弹出框，对话框，提示框等，下面就是一款原创的简单大方的提示框形式样式素材，基本效果如图：


简约大方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>列表显示内容。

        总体结构如图：


简约大方CSS对话框/提示框/弹出框
        注：为了方便大家了解结构我就把外侧两层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)首先将标题栏一分为二，如图所示：


简约大方CSS对话框/提示框/弹出框
 

        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)修改后页面效果：


简约大方CSS对话框/提示框/弹出框

        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)完成后展示效果如图：


简约大方CSS对话框/提示框/弹出框
        当然，我选得图片有点丑，大家可以自己选一些跟自己项目风格比较搭配的进行组合，最后是源代码文件下载。 
 

相关推荐