用右下角显示框取代alert提示框


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style type="text/css">
    *{padding:0px;margin:0px;font-family:"微软雅黑";}
    dd,dl,dt,em,i,p,textarea,a,div{padding:0px;margin:0px;}
    img{border:0px;}
    ul,li{padding:0px;margin:0px;list-style:none; float:left}
    .fl{ float:left}
    .fr{ float:right}
    
    /*右下角弹出*/
    .dingwe{ position:relative;}
    .tipfloat{display:none;z-index:999;border:1px #8e9cde solid; position:absolute; bottom:0px; right:17px;width:388px;height:268px; background:#fff}
    .tipfloat_bt{ height:49px; line-height:49px;background:#8e9cde; padding:0px 20px; font-size:18px; color:#fff; }
    .xx_nrong{font-size:18px; color:#333; text-align:center; padding:30px 0; line-height:26px; }

</style>
</head>
<body>
<div style="height:1000px; background:#CCC">
     <!--弹出信息 右下角-->   
    <div class="tipfloat" data-num="3">
        <p class="tipfloat_bt">
            <span class="fl">消息</span>
            <span class="fr close"><img src="images/guanbi.png"></span>
        </p>
        <div class="ranklist">
             <div class="xx_nrong">
                我擦阿斯顿发送到发送到发送到发送到发发生的风险资产是框架gas滴露发芽率开发银行的开发银行科技成果哈斯是快递费22121212121212121
            </div> 
        </div>
    </div>
</div>
 

<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
/*    //第一种写法
$(function(){
    tankuan();
    //点击关闭按钮
    //  $(".close").click(function(){
    //      $(".tipfloat").animate({height:"hide"},800);
    //  });
});
*/
//第二种写法
$(document).ready(function(){
    tankuan();
});

function tankuan(){
    //if(tk_index!=xx_num){     
        $(".tipfloat").animate({height:"show"},3000);
         setTimeout(function(){
             $(".tipfloat").animate({height:"hide"},1000);
         },10000)       
    }
</script>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41650354/article/details/81134628
今日推荐