首页 > 代码库 > jquery实现弹出即消失的提示层

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

2024-07-01 23:37:22   228人阅读

<!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>

 


联系
我们