带遮罩层弹出框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="boat-mask">
        <div class="boat-dialog">
            <div class="boat-dialog-top">
                <img class="gift-icon" src="/">  /*放置一张图片*/
                <div class="boat-dialog-top-txt">恭喜你!</div>
            </div>
            <div class="boat-dialog-con">获得<span class="boat-dialog-message"></span></div>
            <div class="boat-dialog-tip"></div>
            <div class="boat-dialog-bottom clearfloat">
                <div class="boat-dialog-btn2 hide f-l">知道了</div>
                <div class="boat-dialog-btn">去查看</div>
            </div>
        </div>
    </div>

  css

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/*弹框效果*/
.boat-mask {
    display: none;
    width: 100%;
    height: auto;
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    z-index: 100;
}
.boat-dialog {
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    top: 150px;
}
.boat-dialog-top {
    position: relative;
    width: 150px;
    margin: 0 auto;
    height: 60px;
}
.boat-dialog-top-txt {
    position: absolute;
    width: 100px;
    top: 36px;
    left: 80px;
    color: #666;
    font-size: 18px;
}
.boat-dialog-con {
    color: #ff744b;
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.boat-dialog-bottom {
    width: 220px;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}
.boat-dialog-btn2 {
    width: 120px;
    margin: 0 auto;
    display: inline-block;
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    border: 2px solid #16b473;
    color: #16b473;
    text-align: center;
    border-radius: 2px;
}
.boat-dialog-btn {
    width: 90px;
    margin: 0 auto;
    display: inline-block;
    background-color: #16b473;
    height: 33px;
    line-height: 33px;
    border: 2px solid #16b473;
    color: #fff;
    text-align: center;
    border-radius: 2px;
}
.gift-icon {
    position: absolute;
    left: 0;
    top: -4px;
    width: 120px;
}
.boat-dialog-tip{
    color: #999;
    width: 270px;
    margin: 0 auto;
}
.dragon-prize-active{
    position: relative;
    z-index: 10;
}
.boat-dialog-btn2 {
    width: 90px;
    background-color: #fff;
    margin: 0 auto;
    height: 33px;
    line-height: 33px;
    border: 2px solid #16b473;
    color: #16b473;
    text-align: center;
    border-radius: 2px;
}

  js

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
dialog:function () {
                var message = '充电宝',
                    url = '前往某个页面的url',
                    tip = '可以有个提示信息';
                 
                var bodyH = window.document.body.offsetHeight,availH = document.body.clientHeight,maskH,$dialogBtn = $(".boat-dialog-btn"),$dialogBtn2 = $(".boat-dialog-btn2");
                if(bodyH > availH){
                    maskH = bodyH;
                }else{
                    maskH = availH;
                }
                $(".boat-dialog-message").html(message);
                $(".boat-mask").css("height",maskH).show();
                $(".boat-dialog").show();
 
                if("显示两个按钮"){
 
                    $dialogBtn2.show().html('知道了');
 
                    $dialogBtn.html("去查看").addClass('f-r');
 
                }else{                      //显示一个按钮
                    $dialogBtn2.hide();
                    $dialogBtn.html("知道了").removeClass('f-r');
                }
 
 
                if(tip && tip != ""){
                    $(".boat-dialog-tip").html(tip);
                }
 
                $dialogBtn.off().on("click",function(){
                    $(".boat-mask").hide();
                    $(".boat-dialog").hide();
 
                    if(url && url != ""){
                        location.href = url;
                    }
 
                });
                $dialogBtn2.off().on("click",function(){
                    $(".boat-mask").hide();
                    $(".boat-dialog").hide();
 
                });
 
            }

  

posted @   浣花水榭  阅读(177)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示