jQuery实现消息弹出框效果
更新时间:2019年12月10日 15:23:57 作者:蚩尤后裔
这篇文章主要为大家详细介绍了jQuery实现消息弹出框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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动态添加可拖动元素完整实例(附demo源码下载)
这篇文章主要介绍了jQuery动态添加可拖动元素的方法,可实现简单的点击添加元素,并且添加的元素可进行拖动操作.涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下2016-06-06jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
这篇文章主要介绍了jQuery实现点击后高亮背景固定显示的菜单效果,可实现鼠标点击菜单项后呈现出鼠标滑过一样的背景高亮显示效果,同时该显示效果固定不变,需要的朋友可以参考下2016-09-09Lazy Load 延迟加载图片的jQuery插件中文使用文档
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的2012-10-10jQuery实现限制textarea文本框输入字符数量的方法
这篇文章主要介绍了jQuery实现限制textarea文本框输入字符数量的方法,涉及jQuery键盘事件及页面元素的相关操作技巧,需要的朋友可以参考下2015-05-05
最新评论