Messa a fuoco modale Bootstrap non funzionante

durante la creazione di un Web non ho ottenuto il focus su un "input" in Bootstrap Modal, ho provato tutto e non ha funzionato, appare modale ma l'input non ottiene il focus. Ho fatto un "test.php" con un modale semplice e non funziona neanche. Ecco il "test.php"Messa a fuoco modale Bootstrap non funzionante

<html lang="es"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 


    <link href="../css/bootstrap.min.css" rel="stylesheet"> 
    <script src="../js/jquery.min.js"></script> 
    <script src="../js/bootstrap.min.js"> 



    <script> 


$('#myModal').on('shown.bs.modal', function() { 
    $('#referencia').focus(); 
}) 


    </script> 

</head> 
<body> 
<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <input name="referencia" id="referencia" type="text" class="form-control text-uppercase" placeholder="Descripci&oacute;n"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
</body>

Se provo questo codice sul mio server non funziona, sul server di unelink.es non funziona neanche, ma se metto lo stesso codice su "violino ", funziona bene.

Qualche idea di cosa c'è che non va? Se ho bisogno di qualcos'altro ... o installa qualcosa nel server.

P.D. Mi scusi per il mio inglese.

fonte

2016-03-02 teikuei

Forse il browser non ha trovato il jquery .min.js ?! Se apri il browser con F12/strumenti per sviluppatori/firebug, vedi le voci rosse nella vista di rete? – Varon

È proprio quello che stavo facendo, ecco cosa dice: Errore: JavaScript di Bootstrap richiede jQuery .. ma l'archivio è lì. Perché non viene caricato? – teikuei

Se provo su Chrome funziona ... deve essere qualcosa di Firefox. Stavo diventando pazzo. Quale può essere il problema con Firefox? stava funzionando bene fino ad ora. – teikuei

Prova questo (autofocus aggiunto al tuo link):

<input name="referencia" id="referencia" type="text" class="form-control text-uppercase" placeholder="Descripci&oacute;n" autofocus>

o provare questo:

$('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus(); 
})

o questo:

// Every time a modal is shown, if it has an autofocus element, focus on it. 
$('.modal').on('shown.bs.modal', function() { 
    $(this).find('[autofocus]').focus(); 
});

fonte

2016-03-04 20:51:31 JoeyG

Per me ha funzionato la seconda opzione. Grazie – cralfaro

Grazie, questa è la mia giornata. :) Funzionando come un fascino –

Soprattutto come la funzione jquery di autofocus sempre. Rende costante UX se l'utente chiude accidentalmente il modale. – Michael

Messa a fuoco modale Bootstrap non funzionante

risposta

Problemi correlati