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

Question

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

.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='#'并在事件之间留一个空格。我尝试使用 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>

更新

好的，试试，用 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>