'Bootstrap modal not working on iPhone

This is the modal:

<div class="modal fade" id="modalInsertAgression" tabindex="-1" role="dialog" aria-labelledby="modalInsertAgression" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="card">

        <form id="formInsertarAgresion" action="{% url 'insertarAgresion' %}" role="form">{% csrf_token %}
            <div class="card-header card-header-icon" data-background-color="rose">
                <i class="material-icons">place</i>
            </div>

            <div class="card-content">
                <h4 class="card-title">Test</h4>
                <p class="text-center" id="msgModalInsertAgression"></p>
                <br>

                <div class="input-group">
                    <span class="input-group-addon"><i class="material-icons">date_range</i></span>
                    <div class="form-group">{{ agresionForm.fecha }}</div>
                </div>
            </div>

            <div class="card-footer pull-right">
                <button id="btnInsertModalInsertAgression" type="submit" class="btn btn-fill btn-rose">Insertar</button>
                <button id="btnCloseModalInsertAgression" type="button" class="btn btn-default btn-fill" data-dismiss="modal">Cancelar</button>
            </div>
        </form>

    </div>
</div>

I open it with:

$("#modalInsertAgression").show();

It does not work on iPhone, when the modal appears the background keeps black and it lost the focus, you can not click in the modal or the buttons.

Edit: The modal only works with $("#modalInsertAgression").modal({backdrop: false}); but I do not want to lose the black background...

javascriptjqueryhtmliphone


Solution 1:[1]

Try with (tested on iOS 11):

$('#modalInsertAgression').modal('show');

Snippet:

$('#modalInsertAgression').modal('show');
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalInsertAgression" tabindex="-1" role="dialog" aria-labelledby="modalInsertAgression" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="card">
      <form id="formInsertarAgresion" action="{% url 'insertarAgresion' %}" role="form">{% csrf_token %}
        <div class="card-header card-header-icon" data-background-color="rose">
          <i class="material-icons">place</i>
        </div>
        <div class="card-content">
          <h4 class="card-title">Test</h4>
          <p class="text-center" id="msgModalInsertAgression"></p>
          <br>
          <div class="input-group">
            <span class="input-group-addon"><i class="material-icons">date_range</i></span>
            <div class="form-group">{{ agresionForm.fecha }}</div>
          </div>
        </div>
        <div class="card-footer pull-right">
          <button id="btnInsertModalInsertAgression" type="submit" class="btn btn-fill btn-rose">Insertar</button>
          <button id="btnCloseModalInsertAgression" type="button" class="btn btn-default btn-fill" data-dismiss="modal">Cancelar</button>
        </div>
      </form>
    </div>
  </div>

Solution 2:[2]

I found the solution here:

If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur. Bootstrap modal appearing under background

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jota

Related Questions