Problema modale Bootstrap su Safari/iOS/iPhone

Question

Bootstrap modal fade funziona perfettamente su Chrome/Internet Explorer, ma non funziona su iPhone/Safari. Qualcuno ha una soluzione per questo problema?

<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

Ho avuto lo stesso problema in questi giorni e capito, che Safari su iOS sta lavorando in modo diverso per altri browser rispetto a una cosa. La finestra modale non viene mostrata in Safari ma su molti altri browser, quando manca un href = "#".

non funziona su Safari/iOS, ma gli altri browser:

<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>

lavorando su Safari/iOS e altri browser:

<li><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>

Answer 2

Se si effettua la 'a' tag un 'button', invece, funziona sia in Safari IOS che nei browser desktop.

<li><button data-toggle="modal" data-target="#testModal">Modal</button></li> 

Answer 3

Ho trovato questa risposta che ha risolto il problema per me. Il problema è che iOs non si rende conto che il tag è cliccabile.

Creare uno stile CSS come segue:

.clickable { 
    cursor: pointer; 
} 

Nel codice modale, aggiungere la classe cliccabile:

<li><a data-toggle="modal" class="clickable" data-target="#modalDelete">Delete</a></li>