悬浮模块

移动端自动悬浮：

<style>
    /* 自定义样式 */
    .custom-module {
      position: fixed;
      display: flex;
      bottom: 10px;
      left: 0;
      width: 100%;
    }

    @media (min-width: 768px) {
      .custom-module {
        position: relative;
        bottom: auto;
        left: auto;
        width: auto;
        margin: 0 auto;
        text-align: center;
      }
    }
 </style>
<div class="custom-module">
    悬浮内容
</div>

全局弹窗

<style>
    .cookie-form {
      position: fixed;/* 悬浮 */
      bottom: 0px; /* 距离底部的距离 */
      left: 0px; /* 距离左侧的距离 */
      max-width: 440px;
      max-height: 500px;
      z-index: 9000;/* 前后层权重设置高值是时刻在其他模块前面 */
    }
    .is-flex2 {
            display: flex;
            justify-content: space-between;
        }
    .flex2-left {
            text-align: left;
        }
    .flex2-right {
        text-align: right;
    }
</style>
<article class="message cookie-form" id="cookie-form">
        <div class="message-header">
          <p>{% trans "允许我们使用cookie" %}</p>
        </div>
        <div class="message-body">
            <p>{% trans "我们使用cookie来提升购物体验。如果您选“全部拒绝”,则只会使用必要的cookie,欲了解更多信息请阅读我们的" %}<a href="https://info.btcmai.com/">{% trans "cookies政策" %}</a></p>
            <p class="mt-1 has-text-weight-semibold">{% trans "选择您要使用的cookie" %}:</p>   
            <div class="is-flex2 mt-1">
                <span class="flex2-left">
                    {% trans "网站基本功能(强制)" %}</label>
                </span>
                <span class="flex2-right">
                    <input type="checkbox" checked disabled>
                </span>
            </div>
            <form>
            <div class="is-flex2 mt-2">
                <span class="flex2-left">
                    {% trans "了解和优化用户体验(可选)" %}</label>
                </span>
                <span class="flex2-right">
                    <input type="checkbox" id="c1">
                </span>
            </div>
            <div class="is-flex2 mt-2">
                <span class="flex2-left">
                    {% trans "优化广告效果(可选)" %}</label>
                </span>
                <span class="flex2-right">
                    <input type="checkbox" id="c2">
                </span>
            </div>
            </form>
            <div class="is-flex2 mt-1">
                <span class="flex2-left">
                    <button class="button is-small is-dark mt-2" onclick="cookiejs()">{% trans "接受" %}</button>
                </span>
                <span class="flex2-right">
                    <button class="button is-small is-dark mt-2" onclick="cookiejj()">{% trans "全部拒绝" %}</button>
                </span>
            </div>       
        </div>
      </article>