All of my bootstrap code is working except the modal. The Modal shows, but the entire screen is dark. That is, the modal seems to be "behind" the gray.
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<script src=".7.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<a href="#myModal" data-toggle="modal">Login</a>
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<p>
<form class="modal-form" id="loginform" >
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
All of my bootstrap code is working except the modal. The Modal shows, but the entire screen is dark. That is, the modal seems to be "behind" the gray.
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<a href="#myModal" data-toggle="modal">Login</a>
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<p>
<form class="modal-form" id="loginform" >
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
Share
Improve this question
edited Jan 9, 2013 at 15:21
Jeromy French
12.1k19 gold badges78 silver badges135 bronze badges
asked Dec 31, 2012 at 8:27
user1935559user1935559
1051 gold badge1 silver badge4 bronze badges
4 Answers
Reset to default 5It looks like you need to add this to the script right before the < /head >
<script type="text/javascript">
$(function () {
$("#myModal").modal({show:false});
});
</script>
I do not realy understand the problem ?
I just tried your code in jsfiddle : http://jsfiddle/zFHAJ/ and everything seems to work fine ?
<!DOCTYPE html>
<html>
<head>
<link href="http://moi007.dyndns/igestis/theme/iabsis_v2//css/bootstrap.css?2.0-4" rel="stylesheet">
<link href="http://moi007.dyndns/igestis/theme/iabsis_v2//css/bootstrap-responsive.css" rel="stylesheet">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://moi007.dyndns/igestis/theme/iabsis_v2//js/bootstrap.js?2.0-4"></script>
</head>
<body>
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform" >
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
</body>
</html>
Maybe you have some other custom css that conflicting the bootstrap one ?
place the bootstrap.js or bootstrap.min.js before
</body>
.modal-backdrop {
display: none;
}
.modal {
background: rgba(0,0,0,0.5);
}