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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
php实现简单四则运算器
2020/11/29 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
wxPython中listbox用法实例详解
2015/06/01 Python
Python中字符串的格式化方法小结
2016/05/03 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Django models filter筛选条件详解
2020/03/16 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python colormap库的安装和使用详情
2020/10/06 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
HTML5 与 XHTML2
2008/10/17 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
商务司机岗位职责
2015/04/10 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis