Safari- show() 和 css('display','block') 不起作用

Question

我必须显示一个微调器。微调器有一个具有以下样式的 class：

.spinner-ctn{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(255,255,255,.7);
}

为了显示我尝试使用的微调器：一个

function showSpinnerSignUp(){
    $('.spinner-ctn').css('display','block')
}

b

function showSpinnerSignUp(){
        $('.spinner-ctn').show()
    }

出于某种原因，它们在 safari 中都不起作用

Answer 1

将 # 添加到 <a href='#' 并在事件之间放置 space。我尝试使用 safari 工作正常。

$(document).on('click','.skip-step',function(e){
    $('.spinner-ctn').css('display','block')
})

.spinner-ctn{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(255,255,255,.7);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" event="next" id="skipBotton" class="skip-step pull-right">link</a>
<div class="spinner-ctn"><a class="spinner">test</a></div>

更新

好的，尝试添加 class 和 display: block !important 并切换它。

$(document).on('click','.skip-step',function(e){
    $('.spinner-ctn').toggleClass("spinner_block")
})

.spinner-ctn{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(255,255,255,.7);
}
.spinner_block{
  display:block !important;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(255,255,255,.7);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" event="next" id="skipBotton" class="skip-step pull-right">link</a>
<div class="spinner-ctn"><a class="spinner">test</a></div>

Safari- show() 和 css('display','block') 不起作用

Safari- show() and css('display','block') doesn't work

javascript

css

safari

jquery