javascript - example - modal bootstrap ejemplos
Twitter Bootstrap Modal-Fondo gris pero sin ventana (6)
Tengo un problema extraño con Twitter Bootstrap y los ejemplos no-JS de modal, lo que sucede es que aparece el fondo modal (grises) pero la ventana no.
He encontrado que si elimino la clase "hide" de la ventana modal de div, se cargará pero no correctamente.
El violín está aquí: 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>
El código proviene de este tutorial en el sitio web Bootstraps http://getbootstrap.com/2.3.2/javascript.html#modals
Creo que estás usando los recursos de JavaScript y CSS de Bootstrap 3.0, pero usando Bootstrap 2.3.2 HTML. Actualicé tu violín con el marcado HTML de Bootstrap 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">×</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 -->
Hace referencia al Bootstrap versión 3 css pero usa el código de ejemplo de la versión 2.
Intenta usar el código de ejemplo de la versión 3.
He tenido el mismo problema, estableciendo el índice Z de la ventana modal al más alto en la página corregida.
<style>
.myModalWindow{
z-index: 10;//or higher, depends on z-index of other elements on your page
}
</style>
Tuve un problema similar y pude resolverlo moviendo el modal al principio de la página. Después de hacer eso, aparecieron tanto el fondo como la ventana modal. Me llevó aproximadamente 4 horas de investigación para resolverlo, así que espero que esto ayude a otra persona.
Todas las respuestas anteriores me llevaron a extremos falsos.
Mi problema era exactamente como el PO, excepto que mi problema era que mi CSS descuidado ocultaba / movía el modal de la pantalla.
Hice clic en el nodo en el visor de elementos y apagué todas las reglas de CSS y apareció en el medio de la pantalla como se esperaba.