css 添加突出教程模块

效果图

css样式

/*需要突出显示的部分添加box-shadow*/
    .delivery_content_tips { 
        box-shadow: none;
    }
/*按钮样式*/
.mask {
        position: fixed;
        z-index: 999;
        background-color: transparent;
        width: 92px;
        height: 36px;
        border: 1px dotted #FFFFFF;
        top: 470px;
        left: 900px;
        padding:0px !important;
    }
    .hidden_mask {
        display: none;
    }
    .tips_tool_mask {
        width: 465px;
        height:58px;
        position: absolute;
        background-color: #2789FF;
        top: -68px;
        right: -40px;
        border-radius: 4px;
    }
/*div画一个指向箭头*/
    .tips_tool_mask::after {
        position: absolute;
        bottom: -16px;
        left: 88%;
        content: ' ';
        border: 8px solid transparent;
        border-top: 8px solid #2789FF;
    }
    .tips_tool_mask_text {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        padding: 9px 14px 15px 104px;
    }
    .tips_tool_mask_img {
        width: 112px;
        height: 86px;
        bottom: -4px;
        left: -20px;
        position: absolute;
        background: url('/media/wysiwyg/images/tips-image.png') left center no-repeat;
        background-size: 112px 86px;
    }

html代码

<button class="mask hidden_mask"><?= __('GOT IT');?></button>
<div class="tips_tool_mask hidden_mask">
                <div class="tips_tool_mask_img"></div>
                <div class="tips_tool_mask_text"><?= __('Click the button in the upper right corner to collapse the prompt content!'); ?></div>
            </div>

Jquery 利用cookie控制只需要显示一次

<script type="text/javascript">
    require(['jquery','mage/url','mage/cookies', 'layer'], function ($, url) {
        $(document).ready(function() {
            if ($.cookie('user_dashboard_tips')) {
                $('.tips_tool_mask').addClass('hidden_mask');
                $('.mask').addClass('hidden_mask');
                $('.delivery_content_tips').css('boxShadow', 'none');
            } else {

               $('.tips_tool_mask').removeClass('hidden_mask');
                $('.mask').removeClass('hidden_mask');
                $('.delivery_content_tips').css('boxShadow', '1px 1px 1px 2000px rgba(0,0,0,.6)');
            }
        });
 
        $('.mask').on('click', function () {
            $('.tips_tool_mask').addClass('hidden_mask');
            $('.mask').addClass('hidden_mask');
            $('.delivery_content_tips').css('boxShadow', 'none');
            $.cookie('user_dashboard_tips', 1, {path:'/'});
        })
    });
</script>