web-dev-qa-db-ja.com

Bootstrap Safari / iOS / iPhoneのモーダル問題

ブートストラップモーダルフェードは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/

cssiphonetwitter-bootstrapmobile-safari
10
vinoli

私は最近同じ問題を抱えていて、iOS上のSafariが他のブラウザーとは1つの点で異なる動作をしていることがわかりました。モーダルウィンドウは、Safariでは表示されませんが、href = "＃"がない場合、他の多くのブラウザーでは表示されません。

safari/iOSでは動作しませんが、他のブラウザーでは動作しません：

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

safari/iOSおよびその他のブラウザーでの作業：

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

私は問題を解決するこの答えを見つけました。問題は、タグがクリック可能であることをiOが認識しないことです。

次のようにCSSスタイルを作成します。

.clickable {
    cursor: pointer;
}

モーダルコードで、クリック可能なクラスを追加します。

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

代わりに「a」タグを「ボタン」にすると、Safari IOSとデスクトップブラウザの両方で機能します。

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

変化する transition: all .3s ease;〜transition: opacity .3s ease, transform .3s ease;これで問題が解決しました。

0
Shankar Kanase