重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jQuery如何实现消息弹出框效果

这篇文章主要介绍jQuery如何实现消息弹出框效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

专注于为中小企业提供成都网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业武冈免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下

效果图

jQuery如何实现消息弹出框效果

实现代码




  
  
  
 
  
    .showMessage {
      padding: 5px 10px;
      border-radius: 5px;
      position: fixed;
      top: 45%;
      left: 45%;
      color: #ffffff;
    }
 
    .showMessageSuccess {
      background-color: #00B7EE;
    }
 
    .showMessageError {
      background-color: #ff0000;
    }
  
 
  
    $(function () {
 
      $("#refresh2").click(function () {
        showMessage("注册成功",1);
      });
 
      $("#refresh3").click(function () {
        showMessage("您的网络已断开!",0);
      });
    });
 
    /**
     * 弹出消息提示框,采用浏览器布局,位于整个页面中央,默认显示3秒
     * 后面的消息会覆盖原来的消息
     * @param message:待显示的消息
     * @param type:消息类型,0:错误消息,1:成功消息
     */
    function showMessage(message, type) {
      let messageJQ = $("" + message + "
");       if (type == 0) {         messageJQ.addClass("showMessageError");       } else if (type == 1) {         messageJQ.addClass("showMessageSuccess");       }       /**先将原始隐藏,然后添加到页面,最后以600秒的速度下拉显示出来*/       messageJQ.hide().appendTo("body").slideDown(600);       /**3秒之后自动删除生成的元素*/       window.setTimeout(function () {         messageJQ.remove();       }, 3000);     }      正确消息 正确消息

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

以上是“jQuery如何实现消息弹出框效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站栏目:jQuery如何实现消息弹出框效果
当前网址:http://cqcxhl.com/article/jpejoh.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP