jquery 简单写一个三秒后自动消失的弹出框（警告框）

最新推荐文章于 2023-06-27 15:48:24 发布

码农-Python小高

最新推荐文章于 2023-06-27 15:48:24 发布

阅读量2.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44541001/article/details/104027172

版权

前端专栏收录该内容

11 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现点击弹出层3秒后自动消失</title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <style type="text/css">
        #dianji{text-align: center;margin-top: 50px;font-size: 30px;color:#000;display: block;}
        #disappare{border:1px solid #ccc;border-radius: 5px;background: #fff;font-size: 15px;
            width: 120px;height: 30px;position: fixed;top:0.5%;left: 48%;background-color: #4cae4c}
        #disappare p{display:block;font-size: 16px;margin-top: 4px;width: 100%;height: 100%;color: white}
        #disappare img{display:block;font-size: 16px;width: 20%;height: 100%;float: left;margin-top: -3px;margin-left: 5%;margin-right: 8%}
    </style>
</head>
<body>
    <div id="content">
        <button id="dianji" style="font-size: 1.2em;margin-left: 45%">点击</button>
        <div id="disappare" style="display:none">
            <p id="msg"><img src="./对号%20(3).png">上传成功</p>
        </div>
    </div>
<script type="text/javascript">
    $(function(){
        $("#dianji").click(function(){
            $("#disappare").show().delay(1500).hide(300);
        });
    })
</script>
</body>
</html>

例子：
| 在这里插入图片描述 |

码农-Python小高

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jquery 简单写一个三秒后自动消失的弹出框（警告框）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery实现点击弹出层3秒后自动消失</title> <script src="http://code.jquery.com/jquery-1.8.2.j...
复制链接

扫一扫

专栏目录