收藏
回答

lucky-wheel 开发转盘层级太高,弹窗都被挡住了?

网址 https://100px.net/usage/wx.html,开发的转盘,我需要点击活动规则 弹窗显示规则内容,但是转盘的层级太高,将规则内容挡住了?请问怎么解决?

黑色背景 我是需要层级 高于 转盘 里面显示具体内容的,现在是转盘将黑色背景挡住了,麻烦大家帮忙看下

回答关注问题邀请回答
收藏

1 个回答

  • CRMEB
    CRMEB
    2023-10-16

    可以尝试将转盘的层级降低,让规则内容显示在转盘之上。具体操作如下:


    1. 找到转盘的 HTML 代码,将其包裹在一个 `<div>` 标签中,并设置一个唯一的 ID,例如 `id="wheel-container"`。


    2. 在 `<div>` 标签内添加一个新的 `<div>` 标签,用于显示规则内容。同样设置一个唯一的 ID,例如 `id="rules-container"`。


    3. 将规则内容的 HTML 代码放入新的 `<div>` 标签中。


    4. 使用 CSS 样式调整两个 `<div>` 标签的位置和层级关系,确保规则内容显示在转盘之上。可以使用 `z-index` 属性来控制层级关系。


    示例代码:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>转盘</title>
        <style>
            #wheel-container {
                position: relative;
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
            #rules-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.8);
                z-index: 10;
                padding: 20px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div id="wheel-container">
            <!-- 转盘相关代码 -->
        </div>
        <div id="rules-container">
            <!-- 规则内容 -->
        </div>
    </body>
    </html>
    


    这样修改后,规则内容应该会显示在转盘之上,不会被遮挡。

    2023-10-16
    有用
    回复 3
登录 后发表内容