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实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jquery实现拖拽小方块效果
Dec 10 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JavaScript错误处理
2015/02/03 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
深入理解javascript中的this
2021/02/08 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
Python编程之序列操作实例详解
2017/07/22 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
通过cmd进入python的步骤
2020/06/16 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
2014年百日安全生产活动总结
2014/05/04 职场文书
食品安全工作方案
2014/05/07 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
安全责任书
2015/01/29 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python