在 Safari 上很难看到 Fancybox

Question

我正在使用最新的 jquery.min.js 版本 3.3.1、jquery.fancybox.css 版本 3.5.7 和 jquery.fancybox.pack.js 版本 3.5.7 的 fancybox。

它在除 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();} });
    };

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

在 Safari 上很难看到 Fancybox

Fancybox hard to see on Safari

javascript

jquery

fancybox-3