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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 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
基于mysql的论坛(7)
2006/10/09 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
vue小白入门教程
2018/04/02 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
深入浅析python定时杀进程
2016/06/06 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python实现倒计时小工具
2019/07/29 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
中专生自我鉴定范文
2014/02/02 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
行政复议决定书
2015/06/24 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
环保建议书范文
2015/09/14 职场文书
php实例化对象的实例方法
2021/11/17 PHP