jQuery弹出div提示并2秒自动消失代码,JS代码库,德仔网

代码语言

代码分类

【JS】 jQuery弹出div提示并2秒自动消失

作者:dezai / 发布于2013/12/4/ 486

<!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=UTF-8" />
  <title>jQuery弹出div提示 并2秒自动消失</title>

  <style type="text/css">
    .overlay{
        background:transparent url(images/overlay.png) repeat top left;
        position:fixed;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        z-index:100;
        }

      .box{
        position:fixed;
      top:-500px;
        left:30%;
        right:30%;
        background-color:#fff;
        color:#7F7F7F;
        padding:20px;
        border:2px solid #ccc;
        -moz-border-radius: 20px;
        -webkit-border-radius:20px;
        -khtml-border-radius:20px;
        -moz-box-shadow: 0 1px 5px #333;
        -webkit-box-shadow: 0 1px 5px #333;
        z-index:101;
        }
        span.boxclose{
          float:right;
          width:26px;
          height:26px;
          background:transparent url(images/cancel.png) repeat top left;
          margin-top:-30px;
          margin-right:-30px;
          cursor:pointer;
        }
        .img{float:right;}
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">

function tishi(mess){
$('#overlay').fadeIn('fast', function () {
            $('#box').animate({ 'top': '150px' }, 500);
$("#mess").html(mess);
setTimeout("tishiclose()",2000);//2秒消失，可以改动

          });
}

function tishiclose(){
$('#box').animate({ 'top': '-500px' }, 500, function () {
            $('#overlay').fadeOut('fast');
          });
}


  
  </script>
</head>
<body>
  <a id="activator" href="#" class="demobutton lightblue" onclick="tishi('我是jQuery弹出div提示 并2秒自动消失');">点击查看效果</a>
        <div class="overlay" id="overlay" style="display:none;"></div>
        <div class="box" id="box">
<span class="boxclose" id="boxclose" onclick="tishiclose();"></span>
<span href="http://www.dezai.cn" id="mess"></span>
</div>

</body>
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

dezai贡献的其它代码(1065)