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 17 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery each和js forEach用法比较
Feb 27 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 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
大学生党员自我批评
2014/02/14 职场文书
大学生作弊检讨书
2014/02/19 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
探亲假请假条
2014/04/11 职场文书
关爱残疾人标语
2014/06/25 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android