用css和jquery制作美观的alert

最新推荐文章于 2025-05-03 11:22:30 发布

软件开发实验室

最新推荐文章于 2025-05-03 11:22:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Great_Expectation/article/details/61197312

本文介绍如何使用CSS和jQuery来创建一个美观的自定义警告框，包括设置样式、实现淡入淡出效果及如何在表单验证中应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js默认的alert框非常难看，可以用css+jquery制作更精美的外观

newalert框的css代码：

.alert-box{
display: none;
position: absolute;
top: 40px;
margin-left:410px;
width: 525px;
height: 40px;
padding: 0px;
border-width: 0px;
background-color:#DC3C56;
z-index:10001;
overflow: hidden; //防止出现滚动栏
text-align: center;
padding-bottom: 10px;
color: white;
}

在body任意位置的html代码：

对于提交表单，提示用户数据不符合要求的jquery代码：

function newalert(str2){
var str1="<p>",str3="</p>";
$("#alert1").text(""); //如果存在多次出现alert，要先清除上次append产生的文本
$("#alert1").append(str1.concat(str2,str3));//js的连接字符串函数
$("#alert1").fadeIn(1000);
$('#alert1').fadeOut(2000);//注意这里是数字的时候不带引号
}

下面是实现淡入淡出效果：

点击按钮，出现alert的jquery代码：

$(document).ready(function(){

$(button).click(function(){
$("#alert1").append("<p >.....</p>");
$("#alert1").fadeIn(1000);
$('#alert1').fadeOut(1000);
});

});

参考网站：

http://www.cnblogs.com/zhangjerry/archive/2011/09/29/2195521.html

http://www.w3school.com.cn/jquery/jquery_fade.asp