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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python中的代码编码格式转换问题
2015/06/10 Python
Django中的Model操作表的实现
2018/07/24 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
毕业证丢失证明
2014/01/15 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
小学运动会开幕词
2016/03/04 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
JavaScript ES6的函数拓展
2022/01/18 Javascript
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL