Fancybox трудно увидеть на Safari - PullRequest
Новая
       30

Fancybox трудно увидеть на Safari

0 голосов
/ 20 марта 2019

Я использую 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>

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019

Проблема связана с поведением Safari, которое отличается от других браузеров.После отправки формы, в которой пользователь перемещается со страницы 1 на страницу 2, Safari выполняет эту работу очень быстро и сразу переводит пользователя на страницу 2.Таким образом, Safari считает, что пользователь находится на странице 2, а fancybox для страницы 1, поэтому нет необходимости отображать Fancybox на странице 2.

Решение проблемы - сообщить 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();} });
    };

Это исправило проблему.

0 голосов
/ 22 марта 2019

Я решил проблему, я больше не использую 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;
}
...