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查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
提问的智慧
2006/10/09 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
python解析xml模块封装代码
2014/02/07 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python之django母板页面的使用
2018/07/03 Python
通过python爬虫赚钱的方法
2019/01/29 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
社区服务活动总结
2014/05/07 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis