Question

我正在将fancybox与最新的jquery.min.js版本3.3.1，jquery.fancybox.css版本3.5.7和jquery.fancybox.pack.js版本3.5.7一起使用。

它在除Safari之外的所有浏览器上都能正常工作。在Safari div上，内容看起来几乎是半透明的，但是当我单击“停止”时，它就可以像在其他浏览器上一样正常工作。

<!docktype html>
<html lang=“no”>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src=“PATH/jquery-3.3.1.min.js"><\/script>')
  </script>
  <link rel="stylesheet" href=“PATH/jquery.fancybox.css " type="text/css " media="screen" />
    <script type="text/javascript " src=“PATH/jquery.fancybox.pack.js">
  </script>
</head>
<body>
  <div id="waitanim" style="display:none; background-color: #fff">
    <img src="/img/spinner.gif" />
    <div>Searching …</div>
  </div>
  <form name="form1" id="form1" method="GET" action=“some action” onSubmit="$('#waitanim').show();$.fancybox({'modal': true, 'href': '#waitanim'});" style="padding:0">
    <input type="submit" class="button-brand" id="showtot" name="showtot" value="Search" />
  </form>
</body>
</html>

Answer 1

我已经解决了这个问题，我不再使用fancybox，而是使用CSS：

<div id="overlay" style="display:none">
    <div id="waitanim">
        <img src="spinner.gif" />
        <div class="message">Searching ...</div>
    </div>
</div>

CSS：

div#overlay.show {
    display: block !important;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
div#waitanim {
    text-align:center;
    margin: auto;
    padding:20px;
    border: 1px solid #888;
    width: 40%;
    min-width: 300px;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 10px 10px 50px black;
}
div#waitanim div.message {
    font-weight:bold;
    font-size:16px;
    margin-top:30px;
}

Answer 2

问题出在与其他浏览器不同的Safari行为上。提交用户从第1页导航到第2页的表单后，Safari会非常迅速地完成此工作，并立即将用户带到第2页。这样，Safari会认为该用户位于第2页上，而fancybox用于第1页上，因此无需在第2页上显示Fancybox。

解决此问题的方法是通知Safari：首先显示Fnacybox，然后提交表单。所以我编辑了提交按钮，例如：

<input type="button" class="button-brand" onclick="openModelandSubmit();" id="showtot" name="showtot" value="Search" />

<script type="text/javascript">
    function openModelandSubmit() {

        $('#waitanim').show();$.fancybox({'modal': true, 'href': '#waitanim', afterShow: function() {   $('#form1').submit();} });
    };

这很好地解决了这个问题。

Fancybox在Safari上很难看到

2 个答案: