jQuery 中msgTips 顶部弹窗效果实现代码


Posted in jQuery onAugust 14, 2017

最近发现好多网站都采用顶部弹窗,并且不用用户手动去点击确定。感觉这样很方便用户,所以也找了好多大神的代码,整理一下方便以后查找

前端:

@{
  Layout = null;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>jQuery网页顶部显示操作提示插件 - 聚合分享 - www.juheweb.com</title>
  <link href="~/top/css/css.css" rel="external nofollow" rel="stylesheet" />
  <script src="~/top/js/jquery-1.8.3.min.js"></script>
  <script src="~/top/js/msgTips.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#ie").manhua_msgTips({
        Event: "click",      //响应的事件
        timeOut: 4000,        //提示层显示的时间
        msg: "为了保证更好的网站体验,请升级IE版本到8.0或以上!",      //显示的消息
        speed: 0,        //滑动速度
        type: "warning"      //提示类型(1、success 2、error 3、warning)
      });
      $("#no").manhua_msgTips({
        Event: "click",      //响应的事件
        timeOut: 3000,        //提示层显示的时间
        msg: "很抱歉!您好操作此插件错误,请重新操作!",  //显示的消息
        speed: 0,        //滑动速度
        type: "error"      //提示类型(1、success 2、error 3、warning)
      });
      $("#yes").manhua_msgTips({
        Event: "click",      //响应的事件
        timeOut: 2000,        //提示层显示的时间
        msg: "恭喜你!操作成功,欢迎访问聚合分享网站",      //显示的消息
        speed: 300,        //滑动速度
        type: "success"      //提示类型(1、success 2、error 3、warning)
      });
    });
  </script>
  <style>
    input {
      padding: 10px 20px;
    }
  </style>
</head>
<body>
  <div style="margin:300px auto; width:350px;">
    <input type="button" id="ie" value="警告提示" />  
    <input type="button" id="no" value="错误提示" />  
    <input type="button" id="yes" value="成功提示" />
  </div>
</body>
</html>

个人感觉还是很好用的,这个是从某位大神那里引用来的,如果有冒犯,麻烦告诉我,我会删除的

总结

以上所述是小编给大家介绍的jQuery 中msgTips 顶部弹窗效果实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery extend()详解及简单实例
May 06 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery:unbind方法的使用详解
Aug 14 #jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
jquery对table做排序操作的实例演示
Aug 10 #jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
You might like
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
DOM 高级编程
2015/05/06 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
为什么要有struct关键字
2012/05/08 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
关于中国梦的演讲稿
2014/04/23 职场文书
难忘的一课教学反思
2014/04/30 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
关于教师节的广播稿
2015/08/19 职场文书