Bootstrap popup login page not working?
Question
i am new to php framework and bootstrap working on CodeIgnitor 3.0. I have simple navigation bar for signup and login clicking on login redirects to another page where is another login button clicking on which should open the popup login form but it's not working??
//my nav bar
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<style>
body {
padding-top: 0px;
}
@media (max-width: 1000px) {
body {
padding-top: 0px;
}
}
</style>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">SignUp</a></li>
<li><a href="<?php echo site_url('LoginController/index') ?>">Login</a></li>
</ul>
</div>
</nav>
</div>
//login.php in views folder
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<div class="container">
<div class="row">
<a class="btn btn-primary" data-toggle="modal" href="#myModal" >Login</a>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p><button type="submit" class="btn btn-primary">Sign in</button>
<a href="#">Forgot Password?</a>
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
<a href="#" class="btn btn-primary">Register</a>
</div>
</div>
</div>
</div>
What should i do if i want that login page to popup on homepage???
1 answers
solution1
0 ACCPTED 2015-07-01 12:44:09
You have a couple of issues that you need to correct. To get the modal working you need to remove the hide class on the modal.
<div class="modal hide" id="myModal">
should be
<div class="modal" id="myModal">
Also, the hyperlink should have data-target (not href). So
<a class="btn btn-primary" data-toggle="modal" href="#myModal">Login</a>
should be
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</a>
These changes should get the modal running, but there are other corrections you need to do
In both your files you are loading bootstap, jquery and then bootstrap again. You only need to load bootstrap once and it should be after the jQuery, So
<script src="js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script>
should be
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
Here is the complete //login.php that should work (I've added body and title tags for completeness and closed the html tag)
I've also replaced the script and css with CDN versions to take out any problems with your local js files. Do swap them back once you get it working.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</a>
<div class="modal" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p>
<button type="submit" class="btn btn-primary">Sign in</button>
<a href="#">Forgot Password?</a>
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
<a href="#" class="btn btn-primary">Register</a>
</div>
</div>
</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.