Menu
I'm not sure what I'm doing wrong here but I want to load a login form into a modal window. Once I added the hide to the class of my modal window it disappears and when I click my button nothing happens. I added the fade class into my modal window and the window appears for a few seconds then disappears. I'm not sure what I am doing wrong but here is the code I am using. Any help is always greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<a href="#myModal" data-toggle="modal">Login</a>
<div class="modal hide fade" id="myModal" aria-hidden="true">
<div class="modal-header">
<h3>The Sports Freak Login</h3>
</div>
<div class="modal-body">
<form>
<label>Email</label>
<input type="email" class="span4">
<br>
<label>Password</label>
<input type="text" class="span4">
<br><br>
<button type="submit" class="btn btn-success">Logn</button>
<button type="reset" class="btn">Clear</button>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
268
You're only loading the bootstrap responsive css file when you should be loading the regular bootstrap css file as well (before the responsive one) then last of all you should load your custom css file.
Also if you're loading the latest bootstrap.js file it contains all the bootstrap javascript elements so you won't need to load the separate modal.js file.
58
For me, it wasn't a CSS or double-loaded JS issue. I was using a CDN.
For me, calling the modal via onClick worked when no other solutions did.
onClick="$('#myModal').modal()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
