html 弹框优化 alert

最新推荐文章于 2025-06-06 13:33:49 发布

weixin_33835690

最新推荐文章于 2025-06-06 13:33:49 发布

阅读量940

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiao-zhi/p/9970788.html

本文详细介绍了HTML与CSS的基本使用，展示了如何通过简单的代码实现页面元素的定位与样式设置，包括固定位置的消息提示框和使用透明背景色的效果。此外，还引入了jQuery库进行动态效果的演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>cs</title>
</head>
<style type="text/css">
   .aa{
       width: 224px;
       height: 35px;
       padding-top: 9px;
       text-align:center;
       /*background-color:#ccc;*/
    /*filter:alpha(Opacity=80);*/
    /*-moz-opacity:0.5;*/
    /*opacity: 0.7;*/
    /*border-radius:20px;*/
   }

   #msg{
    height: 2rem;
    text-align: center;
    position: fixed;
    top: 50%;
    margin-top: -1rem;
    line-height: 2rem;
    width: 100%;
}
#msg span{
    color: #fff;
    background: rgba(0,0,0,0.6);
    height: 2rem;
    display: inline-block;
    padding: 0 3rem;
    border-radius: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
  <div class="aa">播放完成 才能缓存下载哦！！</div>
</body>

<script type="text/javascript">
alert('asaogi')
function alert(e){
    $("body").append("<div id='msg'><span>"+e+"</span></div>");
    clearmsg();
}

function clearmsg(){
    var t = setTimeout(function(){
        $("#msg").remove();
    },2000)
};


</script>
</html>