Bootstrap modal issue on Safari/iOS/iPhone

Question

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/

Answer 1

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>

Answer 2

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>