jQuery实现点击弹出层3秒后自动消失

来源：互联网发布：上位机软件开发编辑：程序博客网时间：2024/05/22 10:34

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery实现点击弹出层3秒后自动消失</title>    <link rel="stylesheet" type="text/css" href="../reset.css">    <link rel="stylesheet" type="text/css" href="style.css">    <script type="text/javascript" src="../jquery-1.9.1.js"></script>    <style type="text/css">        #dianji{text-align: center;margin-top: 50px;font-size: 30px;color:#000;display: block;}        #disappare{border:3px solid #ccc;border-radius: 5px;background: #fff;font-size: 20px;            width: 300px;height: 250px;position: fixed;top:50%;left: 50%;margin:-125px 0 0 -150px;}        #disappare h2{height: 35px;line-height: 35px;background: #ddd;text-indent: 5px;}        #disappare p{padding: 5px;font-size: 16px;}    </style></head><body>    <div id="content">        <a id="dianji">点击</a>        <div id="disappare" style="display:none;">            <h2>标题</h2>            <p>3秒后我会自动消失3秒后我会自动消失</p>        </div>    </div><script type="text/javascript">    $(function(){        $("#dianji").click(function(){            $("#disappare").show().delay(3000).hide(300);        });    })</script>   </body></html>

这里写图片描述

2 0