Safari- show（）和css（'display'，'block'）不起作用

I have to display a spinner. The spinner has a class with the following style:

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

.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);
}

For display the spinner I try to use: a

为了显示我尝试使用的微调器:a

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

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

for some reason both of them doesn't work in safari

由于某些原因,他们两个都没有在野生动物园工作

1 个解决方案

#1

Add a # to <a href='#' and put a space between event. I try with safari work fine.

将#添加到

$(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>

UPDATE

ok try, add class with display: block !important and toggle this.

好的尝试,添加带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>

#1