我在 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)
}
最佳答案
正如发布者评论的那样,问题是因为 .offcanvas-siderbars
在 HTML 中的位置位于另一个仅在桌面模式下可见的元素中,因此它会被隐藏在移动模式下。
乐于助人;)
关于javascript - ajax 调用上的 CSS 在桌面上有效,但在移动设备上无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47150371/