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实现图片平滑滚动详解
Mar 22 jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 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内存缓存实现方法
2015/01/24 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
python调用百度API实现人脸识别
2020/11/17 Python
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
自我鉴定200字
2013/10/28 职场文书
个人优缺点自我评价
2014/01/27 职场文书
老公爱的承诺书
2014/03/31 职场文书
解除劳动合同证明书
2014/09/26 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
三十年同学聚会感言
2015/07/30 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技