CODEWITHSUNDEEP
cssiphonetwitter-bootstrapmobile-safari
vinoli
vinoli

Reputation: 457

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/

Upvotes: 12

Views: 51591

Answers (4)

shankar kanase
shankar kanase

Reputation: 107

Change transition: all .3s ease; to transition: opacity .3s ease, transform .3s ease; this fixed my issue.

Upvotes: 0

rene2
rene2

Reputation: 326

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>

Upvotes: 31

Pam Nelligan
Pam Nelligan

Reputation: 91

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>

Upvotes: 9

Graahf
Graahf

Reputation: 123

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>

Upvotes: 4

Related Questions