用 CSS 修饰你的提示信息

本文所指的“提示信息”并非 Javascript 中的 alert(),而是直接放在页面中的想要引起访问者关注的区域,比如在注册页面我们会在表单上方放置一条提示:“为了能够更好的给您提供服务,请详细填写您的个人信息!”。在重视用户体验的今天,我们也要让这些提示信息更加准确、快速、形象的传递给用户。

用 CSS 修饰你的提示信息 – 示例

我们可以先创建一个上下边框为 2 象素的 DIV ,因为我们要用到一个16象素的小图标,所以我们加上 padding:

 
<style type="text/css">
div.alertMessage {
	border-top:2px solid;
	border-bottom:2px solid;
	padding:5px 15px 5px 45px;
	text-align:left;
}
</style>

为了让用户更加容易的区分出提示信息的性质,我们可以分别给不同的信息创建不同的样式,比如警告信息我们可以将颜色设置为黄色,然后再加上一个象征警告的小图标:

 
<style type="text/css">
div.exclamation {
	background:#FFF7C0 url('exclamation.gif') no-repeat 15px center;
	border-color:#FED626;
}
</style>

按照这样的方法我们还可以创建很多其他的信息提示样式:

 
<style type="text/css">
div.information {
	background:#F8FAFC url('information.gif') no-repeat 15px center;
	border-color:#B5D4FE;
}
</style>

这篇文章基于
http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/ (英文)

本文将公共部分独立,通过修改两个属性来实现更多效果。

执行操作前弹出确认框

在管理网站内容时,往往有一个记录列表,而这些列表后面通常都有个编辑或者删除的链接,有时不小心点击了删除链接,会导致一些无法挽回的结果,看过本文后,你就可以在页面加上一些代码,当你要执行操作的时候,它就会弹出确认框.如果是误操作,可以轻而易举的取消.

执行操作前弹出确认框 – 示例

代码:

 
<script type="text/javascript" language="javascript">
<!--
function confirmAct()
{
	if(confirm('确定要执行此操作吗?'))
	{
		return true;
	}
	return false;
}
//-->
</script>

<a href="operate.php?mod=user&act=delete&id=564" onclick="return confirmAct();">执行操作</a>

代码说明: 在普通超链接代码中加入

onclick="return confirmAct();"