Bootstrap modal issue on Safari/iOS/iPhone

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>

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>

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>