web-dev-qa-db-fra.com

Bootstrap problème modal sur Safari / iOS / iPhone

Le fondu modal Bootstrap fonctionne parfaitement sur Chrome/Internet Explorer, mais il ne fonctionne pas sur iPhone/Safari. Quelqu'un at-il une solution à ce problème?

<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/

cssiphonetwitter-bootstrapmobile-safari
10
vinoli

J'ai eu le même problème ces jours-ci et j'ai compris que Safari sur iOS fonctionne différemment des autres navigateurs en ce qui concerne une chose. La fenêtre modale n'est pas affichée sur safari mais sur de nombreux autres navigateurs, quand il manque un href = "#".

ne fonctionne pas sur Safari/iOS mais sur d'autres navigateurs:

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

travaillant sur Safari/iOS et autres navigateurs:

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

J'ai trouvé cette réponse qui a résolu le problème pour moi. Le problème est que iOs ne se rend pas compte que la balise est cliquable.

Créez un style CSS comme suit:

.clickable {
    cursor: pointer;
}

Dans votre code modal, ajoutez la classe cliquable:

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

Si vous créez le bouton 'a' un 'bouton' à la place, cela fonctionne à la fois dans safari IOS et dans les navigateurs de bureau.

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

Changement transition: all .3s ease; à transition: opacity .3s ease, transform .3s ease; cela a résolu mon problème.

0
Shankar Kanase