<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
function twofomr() {
onclick = document.getElementById('dibba_lo').style.display = 'none';
document.getElementById('reg_dibba').style.display = '';
document.getElementById('dibbaT2').innerHTML = "Be a part of NoobSnoop";
}
function onefomr() {
onclick = document.getElementById('reg_dibba').style.display = 'none';
document.getElementById('dibba_lo').style.display = '';
document.getElementById('dibbaT1').innerHTML = "Quick get in !";
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="icon">
<a id="icon" type="image" imgsrc="Save.BMP" "></a></div>
<div class="collapse navbar-collapse " id="navbarNav ">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link active " aria-current="page " href="# ">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">Features</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="textb1 " class="textb1 ">
<H2 class="dibbaT " id="dibbaT1 ""></H2>
</div>
<div id="reg_dibba" ,class='b_dibba'>
<form action="" class="dibba" ,id="regform" ,method="post">
<div class="mb-3">
<label class="form-label">What's your name? </label>
<input type="text" name="name" class="form-control" placeholder="What do they call you?" required/>
</div>
<div class="mb-3">
<label class="form-label">What's your email? </label>
<input type="email" name="mail" class="form-control" placeholder="What do they call you?" required/>
</div>
<div class="mb-3">
<label class="form-label">Set your password</label>
<input type="password" name="piss" id="piss" class="form-control" placeholder="Set a password" required/>
</div>
<div class="mb-3">
<label class="form-label">Confirm your password</label>
<input type="password" name="piss2" id="piss2" class="form-control" placeholder="Confirm your password" required/>
</div>
<div class="mb-3">
<div id="cnfrmpass">`</div>
</div>
<div class="mb-3">
<button type="submit" ,name="sbt" , class="btn btn-primary mb-3"> Submit </button>
</div>
<div class="mb-3">
<button onclick="onefomr()" class="btn btn-primary mb-3"> Login </button>
</div>
</form>
</div>
<div id="textb2" class="textb2">
<H2 class="dibbaT" id="dibbaT2"></H2>
</div>
<div id="dibba_lo" class="m_dibba" style="display: none;">
<form action="" class="dibba_lo" ,id="formlogin" ,method="post">
<div class="mb-3">
<label class="form-label">What's your email? </label>
<input type="email" name="mail" class="form-control" placeholder="What your email address?" required/>
</div>
<div class="mb-3">
<label class="form-label">Set your password</label>
<input type="password" name="piss_m" id="piss" class="form-control" placeholder="Set a password" required/>
</div>
<div class="mb-3">
<button type="submit" ,name="btnlog" , class="btn btn-primary mb-3"> Take me In </button>
</div>
<div class="mb-3">
<button onclick="twofomr()" class="btn btn-primary mb-3"> Register </button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I wrote this piece of code, it is supposed to change the login and register form with changing headings. It shows both headings at once in the wrong place. Can someone point me to what is going wrong? Any help is appreciated in advance.
I have tried creating two separate DIV tags but that didn't work, I gave an inline script but that broke the code. I have given each heading it's own heading, now it is changing positions.
I just fixed your code.
Don't use comma , to separate element attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="icon">
<a id="icon" type="image" imgsrc="Save.BMP"></a></div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="# ">Features</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="textb1" class="textb1">
<H2 class="dibbaT" id="dibbaT1"></H2>
</div>
<div id="reg_dibba" class="b_dibba">
<form action="" class="dibba" id="regform" method="post">
<div class="mb-3">
<label class="form-label">What's your name? </label>
<input type="text" name="name" class="form-control" placeholder="What do they call you?" required/>
</div>
<div class="mb-3">
<label class="form-label">What's your email? </label>
<input type="email" name="mail" class="form-control" placeholder="What do they call you?" required/>
</div>
<div class="mb-3">
<label class="form-label">Set your password</label>
<input type="password" name="piss" id="piss" class="form-control" placeholder="Set a password" required/>
</div>
<div class="mb-3">
<label class="form-label">Confirm your password</label>
<input type="password" name="piss2" id="piss2" class="form-control" placeholder="Confirm your password" required/>
</div>
<div class="mb-3">
<div id="cnfrmpass"></div>
</div>
<div class="mb-3">
<button type="submit" name="sbt" class="btn btn-primary mb-3"> Submit </button>
</div>
<div class="mb-3">
<button onclick="onefomr()" class="btn btn-primary mb-3"> Login </button>
</div>
</form>
</div>
<div id="textb2" class="textb2">
<H2 class="dibbaT" id="dibbaT2"></H2>
</div>
<div id="dibba_lo" class="m_dibba" style="display: none;">
<form action="" class="dibba_lo" id="formlogin" method="post">
<div class="mb-3">
<label class="form-label">What's your email? </label>
<input type="email" name="mail" class="form-control" placeholder="What your email address?" required/>
</div>
<div class="mb-3">
<label class="form-label">Set your password</label>
<input type="password" name="piss_m" id="piss" class="form-control" placeholder="Set a password" required/>
</div>
<div class="mb-3">
<button type="submit" name="btnlog" class="btn btn-primary mb-3"> Take me In </button>
</div>
<div class="mb-3">
<button onclick="twofomr()" class="btn btn-primary mb-3"> Register </button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
function twofomr() {
var regButton = document.getElementById('dibba_lo').style.display = 'none';
document.getElementById('reg_dibba').style.display = '';
document.getElementById('dibbaT2').innerHTML = "Be a part of NoobSnoop";
}
function onefomr() {
var loginButton = document.getElementById('reg_dibba').style.display = 'none';
document.getElementById('dibba_lo').style.display = '';
document.getElementById('dibbaT1').innerHTML = "Quick get in !";
}
</script>
</body>
</html>
Related
I was trying to figure out how can i add or display form data from this index.html page and as of now i did collect the data in the backend, but finding ways on how to display the data in frontend as a card component which i used from bootstrap , appreciate your efforts if anyone could help me on this !
my index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid ">
<a class="navbar-brand " href="index.html">EBlogs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
<main>
<div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">
<img src="./images/mountains.jpg" class="card-img-top" alt="mountains">
<div class="card-body">
<h5 class="card-title">Mountains</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>
<button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>
</div>
</div>
<form id="addBlog" method="POST">
<div class="container contaier-lg">
<div class="mb-3">
<label for="Title" class="form-label">Title for a Blog :</label>
<input type="text" class="form-control" id="title" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="Content" class="form-label">Content :</label>
<input type="text" class="form-control" id="content">
</div>
<div class="mb-3">
<label for="User" class="form-label">Created By :</label>
<input type="text" class="form-control" id="username">
</div>
<button type="button" class="btn btn-primary" onclick="addImage()">Add Blog</button>
</form>
</div>
</main>
<script src="backend.js"></script>
</body>
</html>
my backend.js : (as of now ) :
var card = []
function addImage(){
var title = document.getElementById("title").value
var content = document.getElementById("content").value
var user = document.getElementById("username").value
card = {title,content,user}
function adder(card){
for(let i=0;i<card.length;i++){
card.push(card[i])
}
return card
}
console.log(adder(card))
}
i was try using append method with inner.HTML methods but not working out..
the view when i add the contents would be something like this :
var card = []
function addImage(){
var title = document.getElementById("title").value
var content = document.getElementById("content").value
var user = document.getElementById("username").value
card = {title,content,user}
var cardTemplate = ' <div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;"> '+
' <img src="./images/mountains.jpg" class="card-img-top" alt="mountains">'+
' <div class="card-body">'+
' <h5 class="card-title">'+ title +'</h5>'+
' <p class="card-text">'+ content +'</p>'+
' <button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>'+
' <button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>'+
' </div>'+
' </div>'
'</div>';
document.getElementById("addBlog").insertAdjacentHTML("beforebegin", cardTemplate);
function adder(card){
for(let i=0;i<card.length;i++){
card.push(card[i])
}
return card
}
console.log(adder(card))
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid ">
<a class="navbar-brand " href="index.html">EBlogs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
<main>
<div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">
<img src="./images/mountains.jpg" class="card-img-top" alt="mountains">
<div class="card-body">
<h5 class="card-title">Mountains</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>
<button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>
</div>
</div>
<form id="addBlog" method="POST">
<div class="container contaier-lg">
<div class="mb-3">
<label for="Title" class="form-label">Title for a Blog :</label>
<input type="text" class="form-control" id="title" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="Content" class="form-label">Content :</label>
<input type="text" class="form-control" id="content">
</div>
<div class="mb-3">
<label for="User" class="form-label">Created By :</label>
<input type="text" class="form-control" id="username">
</div>
<button type="button" class="btn btn-primary" onclick="addImage()">Add Blog</button>
</form>
</div>
</main>
<script src="backend.js"></script>
</body>
</html>
I'm building webpage for my homework. I want to have modal register form but when I click "SIGNUP" to pop it up, it close immediately. Why is it like that? How to fix it? I don't want to have auto close on my modal. I want to close it when I click another area or "x" for closing.
I'm beginner in web development. I don't use Bootstrap for modal.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="home.css">
<title>Online Stock Trading</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">STOCK</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Market Data</a>
<a class="nav-item nav-link" href="#">Trade</a>
</div>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Username">
<input class="form-control mr-sm-2" type="search" placeholder="Password">
<button class="btn btn-success my-2 mr-sm-2" id="login">LOGIN</button>
<button class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>
</form>
</nav>
Code for my modal
<!-- register form-->
<div class="container" id="modal_content">
<div class="card text-center">
<div class="card-header bg-dark text-white">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Register
</div>
<div class="card-body">
<form class="register-box">
<div class="form-group row">
<label class="col-sm-4 col-form label">Email</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="test#example.com">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Confirm Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" placeholder="Confirm Password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Last Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Phone</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="081-234-XXXX">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Address</label>
<div class="col-sm-6">
<textarea class="form-control" rows="2"></textarea>
</div>
</div>
<button class="btn btn-success">SUBMIT</button>
</form>
</div>
</div>
</div>
There is a javascript file
<!-- script -->
<script type="text/javascript" src="home.js"></script>
</body>
</html>
JAVASCRIPT
var modal = document.getElementById('modal_content');
var btn = document.getElementById("sign_up");
var close = document.getElementsByClassName("close");
btn.onclick = function(){
modal.style.display = "block";
}
close.onclick = function(){
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
CSS
#modal_content{
width: 40%;
height: auto;
margin-top: 3%;
display: none;
z-index: 1;
overflow: auto;
}
I expect that the modal register form will not be automatically close.
use preventDefault() inside your button onclick function -
btn.onclick = function(e){
e.preventDefault();
modal.style.display = "block";
}
var modal = document.getElementById('modal_content');
var btn = document.getElementById("sign_up");
var close = document.getElementById("close");
btn.onclick = function(e){
e.preventDefault();
modal.style.display = "block";
}
close.onclick = function(){
modal.style.display = "none";
}
window.onclick = function() {
if (event.target == modal) {
modal.style.display = "none";
}
}
#modal_content {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Online Stock Trading</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">STOCK</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Market Data</a>
<a class="nav-item nav-link" href="#">Trade</a>
</div>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Username">
<input class="form-control mr-sm-2" type="search" placeholder="Password">
<button class="btn btn-success my-2 mr-sm-2" id="login">LOGIN</button>
<button class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>
</form>
</nav>
<!-- register form-->
<div class="container" id="modal_content">
<div class="card text-center">
<div class="card-header bg-dark text-white">
<button type="button" id="close" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Register
</div>
<div class="card-body">
...
</div>
</div>
</div>
</body>
</html>
You have a button inside <form>.Therefor your button is set to type "submit".
Try this:
<button type="button" class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>
I've created two form in different php files one is Login form and other is Register form, Then there is two Login and Register buttons in the menu
How can i make these buttons shows their forms in modal?
You can do it with an ajax query so I gonna give you an example that how you can do it:
The HTML and JS:
<body>
<div id="my_modal" class="modal"></div>
<button onclick="showLoginModal()">Login</button>
<button onclick="showRegisterModal()">Register</button>
</body>
<script>
function showLoginModal(){
$.ajax({
url:'php/login_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
function showRegisterModal(){
$.ajax({
url:'php/register_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
</script>
The login_content.php file:
<?php ?><div class="modal-content">
<form action="" method="post">
User
<input name="user_name" id="user_name" type="text"> Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login">Login</button>
</form>
The register_content.php file:
<?php ?>
<div class="modal-content">
<form action="" method="post">
Username
<input name="user_name" id="user_name" type="text">
Password
<input name="user_pass" id="user_pass" type="password">
Confirm Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login"> Register</button>
</form></div>
Greetings!
I'll flesh out my comment on Darwin's answer a little more so you can see what I am talking about.
Now, I warn you about having a fallback way to get the user to the login page just in case javascript doesn't work for whatever reason (and there are many reasons why it wouldn't), but that being said.
The code here is not entirely correct as it involves multiple files, for a full working demo please go to This Plunkr
// Code goes here
$(function() {
$('.modal-btn').on('click', function(e) {
e.preventDefault();
var id = this.id;
$('#login-register-modal').load(id + '_content.html', function(response, status) {
if (status == 'success')
$('#login-register-modal').modal();
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link <span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="btn-group">
<button id="login" class="btn btn-default modal-btn">Login</button>
<button id="register" class="btn btn-default modal-btn">Register</button>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="login-register-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Register_content.html
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
Login_content.html
<div class="modal-content">
<div class="modal-header">
Login
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
After I updated to Bootstrap 3.2.0, all my dropdown buttons stoped working, and the weirdest part, is that if I declare the file twice, as in:
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
It works, but then my modals get broken. I tried going back to 3.0.0, but the problem persists now.
Help?
JSFiddle: http://jsfiddle.net/01hf1obo/
About the console, this is what it shows:
GET http://localhost:3121/Content/css-responsive 1:16
Uncaught ReferenceError: $ is not defined 1:74
GET http://localhost:3121/js-culture.pt-BR 1:88
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3121/Administrador/altEst/1". 1:61
Uncaught TypeError: undefined is not a function
#using System.Web.Optimization
#using BootstrapSupport
#using NavigationRoutes
#using pedidosOnlineMVC.Helpers
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Html.MetaAcceptLanguage()
<link href="#Styles.Url("~/content/css")" rel="stylesheet"/>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="#Styles.Url("~/Content/css-responsive")" rel="stylesheet" type="text/css" />
#RenderSection("head", required: false)
#*#Html.Partial("_html5shiv")*#
#* favicons and touch icons go here *#
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand navbar-brand" href="~/Login">Sistema de pedidos</a>
<div class="nav-collapse">
<ul class="nav">
#Html.Navigation()
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
#Html.Partial("_alerts")
#RenderBody()
<hr>
<footer>
<p>Codifica ® #System.DateTime.Now.ToString("yyyy")</p>
</footer>
</div>
#Scripts.Render(
"~/js",
Html.JsCultureBundle()
)
#RenderSection("Scripts", required: false)
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jasny-bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap.typeahead.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.maskMoney.min.js"></script>
<script src="~/Scripts/TwitterBootstrapMvcJs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#prod_preco').maskMoney({ symbol: "", decimal: ",", thousands: "" });
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
language: 'pt-BR'
});
});
</script>
</body>
</html>
Keep in mind that, if I put the bootstrap.min.js line twice, the dropdown works... That's what's really bugging me.
Here is your updated fiddle : http://jsfiddle.net/01hf1obo/3/
Problems : You have not added framework of jquery on the top of bootstrap.min.js that is why bootstrap's js is not working and shown you that error. I have added it. Now your bootstrap dropdown is working fine. You can check it.
$(document).ready(function () {
$('#prod_preco').maskMoney({
symbol: "",
decimal: ",",
thousands: ""
});
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
});
});
body {
padding-top: 60px;
padding-bottom: 40px;
}
<title>Title</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand navbar-brand" href="~/Login">Sistema de pedidos</a>
<div class="nav-collapse"></div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="panel-default panel">
<div class="panel-heading"> <span style="font-size:medium">Administrador: Administradô</span>
<br /> <span style="font-size:large">Estabelecidimento: Bar da Galera</span>
</div>
<div class="panel-heading">
<div class="btn-group"><a class="btn btn-default" href="/Administrador/Index/1">Início</a>
<div class="btn-group"><a class="btn dropdown-toggle btn-default " data-toggle="dropdown" href="#">Produtos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Listar produtos
</li>
<li>Adicionar produto
</li>
<li>Buscar produto
</li>
</ul>
</div>
<div class="btn-group"><a class="btn dropdown-toggle btn-default " data-toggle="dropdown" href="#">Estabelecimento <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Autorizar clientes
</li>
<li>Alterar cadastro do estabelecimento
</li>
<li>Visualizar pedidos
</li>
</ul>
</div><a class="btn btn-default" href="/Administrador/altCad/1">Alterar cadastro <i class="icon-cog"></i></a>
</div>
</div>
<div class="panel-body">
<br />
<br />
<label for="adm_estabelecimento_nome">Nome<span class="required" style="visibility:hidden;">*</span>
</label>: Bar da Galera
<button class="btn-default btn" data-target="#ModalNome" data-toggle="modal" type="button">Editar</button>
<br />
<label for="adm_estabelecimento_telefone">Telefone<span class="required" style="visibility:hidden;">*</span>
</label>: (32)13213-2131
<button class="btn-default btn" data-target="#ModalTel" data-toggle="modal" type="button">Editar</button>
<br />
<label for="adm_estabelecimento_CNPJ">C N P J<span class="required" style="visibility:hidden;">*</span>
</label>: 11.111.111/1111-11
<button class="btn-default btn" data-target="#ModalCNPJ" data-toggle="modal" type="button">Editar</button>
<br />
<label for="adm_estabelecimento_Endereco">Endereço<span class="required" style="visibility:hidden;">*</span>
</label>: Rua 1, Bairro 1
<label for="adm_estabelecimento_Endereco_numero">Nº<span class="required" style="visibility:hidden;">*</span>
</label> 312312 - Cidade 1
<button class="btn-default btn" data-target="#ModalEnd" data-toggle="modal" type="button">Editar</button>
<br />
<label for="adm_estabelecimento_Imagem">Foto<span class="required" style="visibility:hidden;">*</span>
</label>:
<br />
<div>
<img src="#" />
</div>
<br />
<button class="btn-default btn" data-target="#ModalFoto" data-toggle="modal" type="button">Editar</button>
<div class="modal fade" data-backdrop="false" id="ModalNome" tabindex="-1">
<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">Digite o novo nome:</h4>
</div>
<form action="/Administrador/altEst/1" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="NBOOkrW3V41tYcHE225CcXpvASwluITjv6Z1DwBYBAnrtXpeV9nyx5ddZGp0R4xfBV3fc2VRvy-qhm3WAhmcCZSI0EVPPA5DdXtu2vFkzmg1" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<div class=" form-group">
<label class="control-label" for="adm_estabelecimento_nome">Nome<span class="required">*</span>
</label>
<input class="form-control" data-val="true" data-val-required="O campo Nome é obrigatório." id="adm_estabelecimento_nome" name="adm.estabelecimento.nome" type="text" value="Bar da Galera" /><span class="field-validation-valid" data-valmsg-for="adm.estabelecimento.nome" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" data-backdrop="false" id="ModalTel" tabindex="-1">
<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">Digite o novo telefone:</h4>
</div>
<form action="/Administrador/altEst/1" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="gBl_YOCBjziWl_fk8D22ZwlGvy6q-zClnbAQ8Vrp_k3zN3PhuqC4X31AdgL3MiCmkTd_FCnoWDUY9U221c4Cbdrlg5IvgAwUxSaNq-TQm5k1" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<div class=" form-group">
<label class="control-label" for="adm_telefone">Telefone<span class="required">*</span>
</label>
<input class="form-control" data-mask="(99)99999-9999" data-val="true" data-val-required="O campo Telefone é obrigatório." id="adm_telefone" name="adm.telefone" type="text" value="(32)13213-2131" /><span class="field-validation-valid" data-valmsg-for="adm.telefone" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" data-backdrop="false" id="ModalCNPJ" tabindex="-1">
<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">Digite o novo CNPJ:</h4>
</div>
<form action="/Administrador/altEst/1" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="tmVfA5rZHVJuBDOmsg1HqfxsczlU_EQVdwbqiAVSHcdjXI0xIKDKh-lU0xF6lHSBlj9eWkOctksiJRXFljgvfv_wII0Kf6pBVU72InD3UC01" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<div class=" form-group">
<label class="control-label" for="adm_estabelecimento_CNPJ">C N P J<span class="required">*</span>
</label>
<input class="form-control" data-mask="99.999.999/9999-99" data-val="true" data-val-maxlength="O campo CNPJ deve ser uma cadeia de caracteres ou tipo de matriz com comprimento máximo de '18'." data-val-maxlength-max="18" data-val-minlength="O campo CNPJ deve ser uma cadeia de caracteres ou tipo de matriz com comprimento mínimo de '18'." data-val-minlength-min="18" data-val-required="O campo CNPJ é obrigatório." id="adm_estabelecimento_CNPJ" name="adm.estabelecimento.CNPJ" type="text" value="11.111.111/1111-11" /><span class="field-validation-valid" data-valmsg-for="adm.estabelecimento.CNPJ" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" data-backdrop="false" id="ModalFoto" tabindex="-1">
<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">Selecione a nova foto</h4>
</div>
<form action="/Administrador/altEst/1" enctype="multipart/form-data" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="7dljHIPBM2KzAkonDE9QyHO26bd1Ig0c-cVZIRFlA3b811-hVlRD9AHHR-H1qRlA5qb7lVA6vztym6prDL9GG07aajPh39D2LThZPdRxFjc1" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<img src="#" id="imgpre" />
<div class=" form-group">
<label class="control-label" for="img">Imagem<span class="required" style="visibility:hidden;">*</span>
</label>
<input id="img" name="img" type="File" value="" /><span class="help-block">Sua imagem será redimensionada para 300x300</span><span class="field-validation-valid" data-valmsg-for="img" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" data-backdrop="false" id="ModalEnd" tabindex="-1">
<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">Digitie a nova senha:</h4>
</div>
<form action="/Administrador/altEst/1" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="xcW4SLur-iEK3Pp-a1LDGPOktEmJ7w8c9WPJw_6HphJX0rJ1H9VgnrzHjEHmEU1_JZcVdaQs3bjUQvUfgzTTJ5l0-poDIuF-K_ha8WXEMvg1" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<div class=" form-group">
<label class="control-label" for="adm_senha">Senha<span class="required">*</span>
</label>
<input class="form-control" data-val="true" data-val-required="O campo Senha é obrigatório." id="adm_senha" name="adm.senha" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="adm.senha" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p>Codifica ® 2014</p>
</footer>
</div>
</body>
maskMoney is not a function of bootstrap. it is function of any external js, so you need to also add reference of that js to your html
Done! All i had to do was add $('.dropdown-toggle').dropdown() in my javascript and it worked
I have the following code. I don't know why the modal pop up not popping up when clicking on the login button. I checked and confirmed that data-target and data-toggle are set correctly. Below is my code.
<!DOCTYPE html>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Ritesh Sangwan">
<title>ossoc | Create account</title>
<link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.css" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="./js/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!------ Navabar start --->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="./index.jsp">ossoc</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-btn">
<button id="loginbutton" type="button" class="btn btn-primary" data-target="#registerlogin" data-toggle="modal"><i class="glyphicon glyphicon-log-in"></i>Login</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!---- navbar end--->
<div class="container marketing">
<div class="jumbotron-modified well">
<div class="container">
<form id="register" action="register" role="form" class="form-horizontal" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">First name:</label>
<div class="col-sm-4">
<input id="fnameInput" name="registerfname" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last name:</label>
<div class="col-sm-4">
<input name="registerlname" type="text" class="form-control" id="lnameInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-4">
<input name="registeremail" class="form-control" id="emailInput" placeholder="someone#example.com" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="passwordInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Confirm password:</label>
<div class="col-sm-4">
<input name="registerpassword" type="password" class="form-control" id="passwordConfirmInput" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<div class="checkbox">
<div id="acceptInput">
<input type="checkbox" />
I accept the terms and conditions.
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button id="submit" class="btn btn-success"><i class="glyphicon glyphicon-plus" style="margin-right: 5px"></i>Create account</button>
</div>
</div>
</form>
</div>
</div>
<footer>
<p class="pull-right">Back to top</p>
<p>© 2013 Ritesh Sangwan. · Privacy · Terms</p>
</footer>
</div>
<!--- Model start-->
<div class="modal fade" id="registerlogin" tabindex="-1" role="dialog" 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">x</button>
<h3>Login</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="login" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-log-in" style="margin-right: 5px"></i>Log in</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!---model end ---->
</body>
</html>
Try including jQuery before Bootstrap. Your bootstrap.min.js is before your jquery.
Bootstrap Modal doesn't show