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之验证框validatebox实例详解
Apr 10 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery弹框插件使用方法详解
May 26 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
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
JavaScript版代码高亮
2006/06/26 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
删除节点的jquery代码
2014/01/13 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
详解vue的双向绑定原理及实现
2019/05/05 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
详解Python中的日志模块logging
2015/06/19 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python-numpy-指数分布实例详解
2019/12/07 Python
介绍一下linux的文件系统
2012/03/20 面试题
小区推广策划方案
2014/06/06 职场文书
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers