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 ajax调用webservice注意事项
Oct 08 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现动态操作table行
Nov 23 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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JS高级运动实例分析
2016/12/20 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue实现文字加密功能
2019/09/27 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Python全排列操作实例分析
2018/07/24 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
聘任合同书
2015/09/21 职场文书
Python中的变量与常量
2021/11/11 Python