Twitter Bootstrap Modal - Sfondo grigio ma senza finestra

Ho un problema un po 'strano con Twitter Bootstrap e gli esempi non-JS di modale, ciò che accade è che appare lo sfondo modale (grigi) ma la finestra non .Twitter Bootstrap Modal - Sfondo grigio ma senza finestra

Ho trovato se rimuovo la classe "nascondi" dal div modal windows, verrà caricato ma non correttamente.

The Fiddle è qui: http://jsfiddle.net/2VbUG/1/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content="John Moss - Stolen Bikes UK"> 
    <title>Title</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> 

    <!-- Custom styles for this template --> 
    <link href="assets/css/style.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="assets/js/html5shiv.js"></script> 
     <script src="assets/js/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-bottom"> 
     <div class="container"> 
     <div class="col-lg-12 sign"> 
       <a href="#myModal" role="button" class="btn btn-lg btn-danger" data-toggle="modal">Sign!</a> 
     </div> 
     </div> 
    </div> 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Sign This Petition!</h3> 
     </div> 
     <div class="modal-body"> 
      <p>Fields for the signatures here, take some from the facebook API</p> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
      <button class="btn btn-primary">Sign Now!</button> 
     </div> 
    </div> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="//code.jquery.com/jquery.js"></script> 
    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
</body> 
</html>

Il codice è venuto da questo tutorial sul sito Bootstraps http://getbootstrap.com/2.3.2/javascript.html#modals

fonte

2013-08-31 John Moss

Stai riferimento alla versione 3 Bootstrap css, ma utilizzando il codice di esempio la versione 2.

provare a utilizzare il version 3 example code.

fonte

2013-08-31 23:28:55 embee

Penso che si sta utilizzando il Bootstrap 3,0 JavaScript e CSS risorse ma utilizzando Bootstrap 2.3.2 HTML. Ho aggiornato il vostro violino con Bootstrap markup HTML 3.0: http://jsfiddle.net/UWv9q/1/

<!-- Button trigger modal --> 
<a data-toggle="modal" href="#myModal" class="btn btn-lg btn-danger">Sign!</a> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Sign this petition!</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Fields for the signatures here, take some from the facebook API</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Sign now!</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

fonte

2013-08-31 23:31:48

il problema è che si sta caricando di bootstrap 3, ma guardando la documentazione della versione 2.3.2. Controlla la demo (snippet e result) che ho creato, funziona bene se carichi la versione corrente.

fonte

2013-08-31 23:34:26

Ho scelto la prima risposta, ma ho pensato di aggiungere un ringraziamento! Potrei votare se potessi. –

Ho avuto lo stesso problema, impostando lo z-index della finestra modale sul più alto nella pagina fissato.

<style> 
.myModalWindow{ 
    z-index: 10;//or higher, depends on z-index of other elements on your page 
} 
</style>

fonte

2016-01-22 16:18:29 Salty

ho avuto un problema simile e sono riuscito a risolverlo spostando il modale verso la parte superiore della pagina. Dopo averlo fatto apparivano sia lo sfondo che la finestra modale. Mi ci sono volute circa 4 ore di ricerca per capirlo, quindi spero che questo aiuti qualcun altro!

fonte

2016-11-15 15:35:50

Tutte le risposte di cui sopra mi hanno semplicemente portato a conclusioni false.

Il mio problema era simile a quello indicato dall'OP tranne che il mio problema era il mio CSS sciatto che nascondeva/spostava il modale fuori dallo schermo.

Ho fatto clic sul nodo nel visualizzatore di elementi e disattivato tutte le regole CSS ed è apparso nel mezzo dello schermo come previsto.

fonte

2017-12-02 18:21:37 Leathan

Twitter Bootstrap Modal - Sfondo grigio ma senza finestra

risposta

Problemi correlati