Bootstrap modal issue on Safari/iOS/iPhone

问题:

Bootstrap modal fade is working perfectly on Chrome/Internet Explorer, but it doesn't work on the iPhone/Safari. Does someone a solution for this issue?

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

回答1:

I had the same problem these days and figured out, that safari on iOS is working differently to other browsers with respect to one thing. The modal window is not shown on safari but on many other browsers, when there is a href="#" missing.

not working on Safari/iOS but other browsers:

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

working on Safari/iOS and other browsers:

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

回答2:

I found this answer that solved the problem for me. The problem is that iOs doesn't realize that the tag is clickable.

Create a CSS style as follows:

.clickable {
    cursor: pointer;
}

In your modal code, add the clickable class:

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

回答3:

If you make the 'a' tag an 'button' instead, it's working in both safari IOS and desktop browsers.

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