jQuery实现消息弹出框效果


Posted in jQuery onDecember 10, 2019

本文实例为大家分享了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 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery实现弹出层效果
Dec 10 #jQuery
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
jQuery实现弹幕特效
Nov 29 #jQuery
jquery实现直播弹幕效果
Nov 28 #jQuery
You might like
PHP音乐采集(部分代码)
2007/02/14 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Django中使用group_by的方法
2015/05/26 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python线程之定位与销毁的实现
2019/02/17 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
在python中修改.properties文件的操作
2020/04/08 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
django下创建多个app并设置urls方法
2020/08/02 Python
python 实现逻辑回归
2020/12/30 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
教育局长自荐信范文
2013/12/22 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书