微客导航 » 文章资讯 » jQuery实现消息弹出框效果

jQuery实现消息弹出框效果

2023-08-04 17:47:06 413

本文实例为大家分享了jQuery消息弹出框的具体代码，供大家参考，具体内容如下

效果图

实现代码









.showMessage{
padding:5px10px;
border-radius:5px;
position:fixed;
top:45%;
left:45%;
color:#ffffff;
}

.showMessageSuccess{
background-color:#00B7EE;
}

.showMessageError{
background-color:#ff0000;
}



$(function(){

$("#refresh1").click(function(){
showMessage("注册成功",1);
});

$("#refresh2").click(function(){
showMessage("您的网络已断开!",0);
});
});

/**
*弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒
*后面的消息会覆盖原来的消息
*@parammessage：待显示的消息
*@paramtype：消息类型，0：错误消息，1：成功消息
*/
functionshowMessage(message,type){
letmessageJQ=$(""+message+"

"); if(type==0){ messageJQ.addClass("showMessageError"); }elseif(type==1){ messageJQ.addClass("showMessageSuccess"); } /**先将原始隐藏，然后添加到页面，最后以600秒的速度下拉显示出来*/ messageJQ.hide().appendTo("body").slideDown(600); /**3秒之后自动删除生成的元素*/ window.setTimeout(function(){ messageJQ.remove(); },3000); } 正确消息正确消息

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现消息弹出框效果

热门推荐

随机推荐