jQuery实现消息弹出框效果
2019-12-11 12:11
2606 查看
本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下
效果图
实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/--> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .showMessage { padding: 5px 10px; border-radius: 5px; position: fixed; top: 45%; left: 45%; color: #ffffff; } .showMessageSuccess { background-color: #00B7EE; } .showMessageError { background-color: #ff0000; } </style> <script type="text/javascript"> $(function () { $("#refresh1").click(function () { showMessage("注册成功",1); }); $("#refresh2").click(function () { showMessage("您的网络已断开!",0); }); }); /** * 弹出消息提示框,采用浏览器布局,位于整个页面中央,默认显示3秒 * 后面的消息会覆盖原来的消息 * @param message:待显示的消息 * @param type:消息类型,0:错误消息,1:成功消息 */ function showMessage(message, type) { let messageJQ = $("<div class='showMessage'>" + message + "</div>"); if (type == 0) { messageJQ.addClass("showMessageError"); } else if (type == 1) { messageJQ.addClass("showMessageSuccess"); } /**先将原始隐藏,然后添加到页面,最后以600秒的速度下拉显示出来*/ messageJQ.hide().appendTo("body").slideDown(600); /**3秒之后自动删除生成的元素*/ window.setTimeout(function () { messageJQ.remove(); }, 3000); } </script> </head> <body> <button id="refresh1">正确消息</button> <button id="refresh2">正确消息</button> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- jQuery实现弹出带遮罩层的居中浮动窗口效果
- jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
- jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
- jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
- jquery实现可自动判断位置的弹出层效果代码
- 使用jQuery实现DIV弹出效果
- jQuery实现单击按钮遮罩弹出对话框效果(1)
- js实现仿qq消息的弹出窗效果
- jQuery实现的AJAX简单弹出层效果代码
- jquery实现隐藏在左侧的弹性弹出菜单效果
- 使用jQuery实现弹出框效果
- 天易13----jquery实现简单的可拖动的弹出层效果
- jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
- jquery简单实现点击弹出层效果实例
- jquery实现弹出层遮罩效果
- jquery实现点击弹出层效果的简单实例
- jQuery-ajax实现的弹出菜单效果
- jQuery实现文章图片弹出放大效果
- 使用jQuery实现页面定时弹出广告效果
- jquery 实现弹出层效果