Bootstrap modal issue на Safari/iOS/iPhone

Question

Bootstrap modal fade отлично работает на Chrome/Internet Explorer, но он не работает на iPhone/Safari. Кто-нибудь решение для этой проблемы?

<div class="modal fade" id="notice" tabindex="-1" role="dialog" aria-labelledby="notice" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <img src="https://random.hellyer.kiwi/files/2013/11/wiley-coyote-help.jpg" /> 
       | wait, I'm updating... 
      </div> 
     </div> 
    </div> 
</div> 

<script> 
    $('#notice').modal('show'); 
    setTimeout(function() { 
     $('#notice').modal('hide'); 
    }, 3000); 
</script> 

https://jsfiddle.net/mmbtfhaf/

Answer 1

У меня была та же проблема в эти дни, и выяснили, что сафари на прошивкой по-разному работать с другими браузерами в отношении одной вещи. Модальное окно не отображается на сафари, но во многих других браузерах, когда отсутствует href = "#".

не работает на Safari/прошивкой, но и другие браузеры:

<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>

работает на Safari/прошивкой и другие браузеры:

<li><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>

Answer 2

Если вы сделаете 'а' тэга вместо этого он работает как в сафари IOS, так и в настольных браузерах.

<li><button data-toggle="modal" data-target="#testModal">Modal</button></li> 

Answer 3

Я нашел этот ответ, который решил проблему для меня. Проблема в том, что iOS не понимает, что тег доступен для кликов.

Создание стиля CSS следующим образом:

.clickable { 
    cursor: pointer; 
} 

В вашем модальном коде, добавьте интерактивный класс:

<li><a data-toggle="modal" class="clickable" data-target="#modalDelete">Delete</a></li>