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>

Safari- show（）和css（＆＃39; display＆＃39;，＆＃39; block＆＃39;）不起作用

1 个答案: