莫橙夕  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="JS/JavaScript/jquery-1.7.2.min.js"></script>
    <style type="text/css">
        .Calculator_box-opened {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            overflow-y: visible;
            display: none;
            background-color: #000;
            opacity: 0.8;
            filter: alpha(Opacity=80, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100);
            z-index: 1099;
        }
        .Calculator_box {
            padding: 0px;
            width: 520px;
            margin: 100px auto;
            text-align:center;
            background-color: #FFF;
            position: relative;
        }
    </style>
 
    <script type="text/javascript">
        $(document).ready(function () {
            var speed = 600;//动画速度
            $("#dj").click(function (event) {//绑定事件处理
                event.stopPropagation();
                $("#Calculator").show(speed);//动画显示
            });
            //单击除空白区域外的空白区域就隐藏
            $(document).click(function () {
                if (!$(event.srcElement).is(".Calculator_box,.Calculator_box *")) {
                    $("#Calculator").hide(speed);
                }
            });
        });
    </script>
 
</head>
<body>
     
    <input type="button" value="点击我弹出层吧" id="dj" />
    <div class="Calculator_box-opened" id="Calculator">
        <div class="Calculator_box">
             <span style="color:red; font-size:16px">大家好,我是弹出层哟!</span>
        </div>
    </div>
</body>
</html>

  简单示例比较容易懂!

posted on   莫橙夕  阅读(381)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· Java轻量级代码工程
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战
 
点击右上角即可分享
微信分享提示