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实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jquery实现简易验证插件封装
Sep 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
制作特殊字的脚本
2006/06/26 Javascript
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
jQuery select控制插件
2009/08/17 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
javascript实现表单验证
2016/01/29 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
nodeJS微信分享
2017/12/20 NodeJs
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
使用python turtle画高达
2020/01/19 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
JPA面试常见问题
2016/11/14 面试题
办理生育手续介绍信
2014/01/14 职场文书
秸秆管理实施方案
2014/03/15 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
受资助学生感谢信
2015/01/21 职场文书