子比主题美化-会员开通引导区块

此代码可以直接调用会员开通弹窗，看起来还不错。

效果展示

教程开始

代码放至——模块配置——顶部全区块或文章内容上方、文章页顶部全区块——自定义 HTML：

<div class="n_banner_inner">
  <div class="img-info">!
    <div class="info">也想出现在这里？
      <a rel="nofollow noopener noreferrer" href="/" rel="external nofollow"  target="_blank">联系我们</a>吧</div>
  </div>
  <a class="pay-vip" href="javascript:;" rel="external nofollow" >
    <div class="Banner-adTag">广告</div>
    <img class="tirr" src="/" alt="闲云笔记">
  </a>
</div>
<style>
    /*定位*/
    .n_banner_inner {
        position: relative;
    }
    /*提示信息*/
    .n_banner_inner .img-info {
        position: absolute;
        right: 12px;
        top: 9px;
        padding: 0;
        text-align: right;
        color: #fff;
    }
    .n_banner_inner .img-info i {
        position: relative;
        display: inline-block;
        color: #007bff;
        font-size: 20px;
        line-height: 19px;
        text-align: center;
        z-index: 9;
        font-style: inherit;
    }
    .n_banner_inner .img-info .info {
        position: absolute;
        bottom: 5px;
        right: 0;
        width: 0;
        padding: 5px 0;
        overflow: hidden;
        background: #007bff;
        border-radius: 10px;
        line-height: 10px;
        text-align: center;
        font-size: 10px;
        color: #fff;
        white-space: nowrap;
        -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    }
    .n_banner_inner .img-info .info a {
        color: #fff;
    }
    .n_banner_inner .tirr {
        max-width: 100%;
        height: auto;
        transition: 0.5s;
        border-radius: 5px;
    }
    /*触发 Hover*/
    .n_banner_inner:hover .info {
        width: auto;
        padding: 5px 23px 5px 12px;
        -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        font-size: 12px;
        z-index: 1;
    }
    .n_banner_inner img:hover {
        filter: brightness(50%);
    }
    /*出发声明 hover*/
    .n_banner_inner .info:hover a {
        color: red;
        text-decoration: none;
    }
    /*左下角广告*/
    .n_banner_inner .Banner-adTag {
        position: absolute;
        left: 5px;
        bottom: 5px;
        width: 50px;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        color: #ebebeb;
        opacity: 0.5;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    @media screen and (max-width: 768px) {
        .n_banner_inner .img-info {
            display: none;
        }
    }
  .container {
    width: 100%;
}
.zib-widget {
    clear: both;
    background: #fff0;
    padding: 0px;
    box-shadow: 0 0 0px var(--main-shadow);
    border-radius: var(--main-radius);
    margin-bottom: 20px;
}
</style>

 素材资源