jquery实现弹出即消失的提示层

作者：编程知识库发布：2014-03-02 分类：jquery 阅读：3,067次


<!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>
     <title></title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             $("#btn").click(function () {
                 $("#dv").slideToggle(200);
                 setTimeout(function () {
                     $("#dv").hide(200);
                 }, 3000);
             });

         });
     </script>
     <style type="text/css">
         div.RoundedCorner
         {
             background: #C8E2FA;
         }
         b.rtop, b.rbottom
         {
             display: block;
             background: #FFFFFF;
         }
         b.rtop b, b.rbottom b
         {
             display: block;
             height: 1px;
             overflow: hidden;
             background: #C8E2FA;
         }
         b.r1
         {
             margin: 0 5px;
         }
         b.r2
         {
             margin: 0 3px;
         }
         b.r3
         {
             margin: 0 2px;
         }
         b.rtop b.r4, b.rbottom b.r4
         {
             margin: 0 1px;
             height: 2px;
         }

         #dv
         {
             width: 300px;

             position: absolute;
             top: 10px;
             left: 39%;
             z-index: 10001;
             padding: 0;
         }
         .shade
         {
             display: none;
         }
     </style>
 </head>
 <body>
     <div id="dv" class="shade">
         <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
         </b></b>
         <div style=" height:100px; text-align:center; background-color:#C8E2FA;">
         <br /><br />
             <div style="height:30px; font-weight: bold; font-size:16px; background-color:#C8E2FA;">

                 修改成功!

             </div>
         </div>
          <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2">
         </b><b class="r1"></b></b>
     </div>
     <input type="button" id="btn" value="点击" />
 </body>
 </html>

转载请注明：jquery实现弹出即消失的提示层 - 编程知识库

该文章由编程知识库发于2014年03月02日发表在jquery分类下，你可以至底部留下评论。

原创文章转载请注明: jquery实现弹出即消失的提示层 | 编程知识库

上一篇：css和js禁止网页选择文字

下一篇：jquery artDialog对话框弹出层插件实测和美化

您可能还会对这些文章感兴趣

2016-12-20 1,618次只会用jQuery前端到底low不low?
如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快毕业了。不过我觉得这件事不足为提，因为国...
2016-12-17 643次jquery的$().each,$.each的区别
在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。 $().each,对于这个方法，在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来...
2016-12-15 1,275次jquery加载外部文件（.txt .html)显示在网页上
在web开发中常常需要用到jquery去动态的加载文件显示在网页上面，下面是实现的小方法，希望给大家一点提示，达到抛砖引玉的作用哦！！！效果图：要加载显示的文件：网页加载效果： html代码截图： jquery代码截图：转载请注明：jquery加载外部文件（.txt ....
2016-12-15 524次javascript实现网页倒计时
web开发中常常需要使用到网页倒计时功能，下面是实现方法：效果图：代码截图：转载请注明：javascript实现网页倒计时 - 编程知识库

jquery实现弹出即消失的提示层

您可能还会对这些文章感兴趣

2016-12-20 1,618次只会用jQuery前端到底low不low?

2016-12-17 643次jquery的$().each,$.each的区别

2016-12-15 1,275次jquery加载外部文件（.txt .html)显示在网页上

2016-12-15 524次javascript实现网页倒计时

大家正在看

推荐阅读

全部分类

本月热门