javascript - ajax 调用上的 CSS 在桌面上有效，但在移动设备上无效

Question

我在 beforeSend 上调用了一个 ajax 调用，该函数加载 CSS 类以创建加载器和叠加层。成功后，我将通过调用另一个函数将其删除。但是被调用的 CSS 类仅在桌面 View 中应用，而不在移动 View 中应用。我不确定我在这方面犯了什么错误？谁能告诉我如何解决这个问题？

ajax调用如下

function filterAjax(s_url){         
        $.ajax({
            type: "GET",
            data : {is_ajax:1},
            url: s_url,
            beforeSend: function() {
                initLoader();
            },
            success: function(data) {
                killLoader();               
                updatePage(data);
                filter();
                $(".offcanvas-siderbars").removeClass("column-left-active");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //console.log(errorThrown);
            }
        });     
    }

被调用的函数如下。

function initLoader() {
        $('.mkmage-overlay').fadeIn(200, function(){
            $('.mkmage-loader').show();
        });
    }

    function killLoader() {
        $('.mkmage-loader').hide();
        $('.mkmage-overlay').fadeOut(200);
    }

我使用的 CSS 类如下。

.mkmage-overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #363636;
    z-index: 10000;
    top: 0;
    left: 0;
}
.mkmage-loader{
    display: none;
    width: 60px;
    height: 60px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000000;
    transform: translate3d(-50%,-50%,0)
}

Answer 1

正如发布者评论的那样，问题是因为 .offcanvas-siderbars 在 HTML 中的位置位于另一个仅在桌面模式下可见的元素中，因此它会被隐藏在移动模式下。

乐于助人;)