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?

&l         


        

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

Answer 2

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

Answer 3

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 4

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>