I'm making a modal form that allows users to log in. As soon as I click on "Log In" the modal form appears and disappears.
Here is the button that calls the modal form. It is part of my navigation bar:
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
Modal Body:
<div class="modal fade" id="myModal" tableindex='-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">Log-in</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
Close
Log-in
</div>
</div>
</div>
</div>
This code works for me on jsBin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<div class="modal fade" id="myModal" tableindex='-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">Log-in</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
Close
Log-in
</div>
</div>
</div>
</div>
</body>
</html>
Sounds like you may be loading the JavaScript for Bootstrap Modal twice. Are you possibly loading bootstrap.js as well as bootstrap-modal.js? Or both bootstrap.js and bootstrap.min.js?
Related
I am trying to get a modal pop-up window from another modal pop-up
window. when i click the link from the first pop-up window, the second
pop-up window is opening, but the first one not getting closed.
I tried but not working properly.
Data target is not work because List item theme JavaScript is conflict.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function showpopup(id)
{
$("#textid").val(id);
$("#myModal").modal('show');
//alert();
}
function forgotpopup()
{
$("#myModal").modal('hide');
$("#ForGot").modal('show');
}
</script>
<article>
<div id="main-wrapper" class="container">
<a class="btn btn-primary" value="" data-toggle="modal" class="btn btn-primary" onclick="showpopup(<?php echo $fetch_package['cID'];?>);" style=" background:#ee8f22 ;">CLICK HERE</a><br>
</div>
</article>
<div class="container">
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title">Login</h4></center>
</div>
<div class="modal-body" style="padding:30px 40px;">
<form role="form" method="post">
<div class="form-group">
<label for="usrname" style="font-weight: normal; font-size: 14px;">Username</label>
<input type="text" class="form-control" id="email_id" placeholder="Enter email" name="email_id" required>
</div>
<div class="form-group">
<label for="psw" style="font-weight: normal; font-size: 14px;"> Password </label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter password" required>
</div>
<div class="form-group pull-left" style="width:100%; border:0px solid ;">
<input type="checkbox" >
<label style="font-weight: normal; font-size: 14px; margin-top:-27px; margin-left:23px;"> Remember me</label>
</div>
<center>
<button type="submit" class="btn" style="margin-top:15px; background:#ee8f22 ;color:#fff; " name="submit">LOGIN</button>
<p> Forgot Password </p>
<p>Not a member? <a href="#" >Sign Up</a></p>
</center>
<input type="hidden" name="txtid" id="textid" value="">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ForGot" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:center;">Forgot Password</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<h6>Enter your email associated with your account to get link to reset the password.</h6>
<input type="text" required>
</form>
</div>
</div>
</div>
</div>
</div>
Have a look at the below code:
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm">
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="registerPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Register
</h3>
<span id="flipper2">
Login
</span>
</div>
<div class="myPanelBody">
<form id="registerForm">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your name here" />
</div>
<div class="form-group">
<label for="newAuthCode">New Authentication Code</label>
<input type="password" class="form-control" id="newAuthCode" placeholder="New auth code" />
</div>
<div class="form-group">
<label for="clientSecret">Client Secret</label>
<input type="password" class="form-control" id="clientSecret" placeholder="Client secret" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
</div>
</div>
As, you can see..the modal is expected to pop when submit button is clicked in either form. But When I click the submit button in the Login form, nothing happens. I know I have made some mistakes because it was working properly a few hours back then I don't know what I did wrong and now my code is completely broken. The modal window is there to show a loading spinner. In the above code, you can see an anchor element in each Form with text Register and Login respectively. I don't know if it's necessary but I will explain what it does. I want to hide the Login form and show the registration form when Register link is clicked. The registration form also has a button in same manner which hides itself and brings the Login form in visual. The registration form also has a submit button which when clicked, fires the modal.
As I mentioned above, the modal is not popping when submit button from the Login form is clicked. But when I switch to registration form and click Submit there, it fires the modal. The more interesting thing is that when I switch back to the Login form and click submit there, it also shows the modal as expected. In short when the URL changes to myfile.php?#, everything works fine but when it is myfile.php or myfile.php?, I can't fire the Modal from Login form's submit button without switching the form for at least once.
Below code will launch modal window on button click. This is not the code that makes your logic to work but this will just pop up the modal window on button click.
Libraries used: jquery 2.1.1, Bootstrap 3.3.7
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Reference: https://v4-alpha.getbootstrap.com/components/modal/
Give some time to submit the form and to show modal
you are doing same thing at same time, First show the modal and then submit the form
function myFunction()
{
setTimeout(function(){
$("#loginForm").submit(); // if you want
}, 2000);
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm" >
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button onclick="return myFunction();" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
loading
</div>
</div>
</div>
</div>
</body>
</html>
I am having issues creating a module where it displays if the submission is valid (based on factors outside of the code- ex. the length of a string is acceptable).
When everything passes the test submits and then the modal pops up but disappears in about .5 seconds. Is there a way to make it stay longer?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="faviconmoney.ico"/>
<meta charset="utf-8">
<title>Employee Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul class="nav nav-pills">
<li role="presentation" class="active">Expenses</li>
<li role="presentation">Employee Data</li>
<li role="presentation">Logout</li>
</ul>
<hr />
</div>
<div>
<form role="form" method="post" id="user">
<div class="col-md-4">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
</div>
<div class="form-group">
<label for="first name">First Name:</label>
<input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
</div>
<div class="form-group">
<label for="last name">Last Name:</label>
<input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
</div>
<button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button>
</div>
</form>
</div>
<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" id="myModalLabel">
Your changes have been submitted and updated!
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</body>
</html>
Load jquery(.min).js before bootstrap(.min).js.
As a rule of thumb, don't expect files from different versions of the same library/plugin to work well together. You are using Bootstrap .css from v.3.7.7 and .js from version v3.1.0.
Working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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" id="myModalLabel">
Your changes have been submitted and updated!
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Submit
As you can see, I'm using your code in the above example, linking the required dependencies in their correct order and the modal doesn't go away.
If this doesn't help you, you'll need to reproduce the bug here so we could pinpoint its source.
Edit, based on addition to question: Your modal does not disappear. It is dumped by browser, together with the page, because you are submitting a form simultaneously with displaying the modal. Submitting the form causes your page to refresh the page in its entirety. You need to:
Prevent conventional form submission:
$('form#user').submit( function(e){
e.preventDefault();
// send your data here in an $.ajax()
})
send the data async (via $.ajax()) and parse the result into your existing page.
For help on how to do that, see this question - and its answers.
Below is the solution with the explanation.
HTML Form Submission has a set process that cannot be modified. We can stop the default form submission action and use our script instead.
HTML Form Submission Process
HTML Form has an Action file defined with the form itself in action along with method and other attributes.
This ensures that once the form is submitted, the browser will move to the action file and process based on the HTML Form Input values. Since the browser is moving away from the Form page, therefore any UI object on the Form page will end immediately.
In your case, you are not supposed to move away from the page. Instead you have to prevent the default Form Submit action and use Ajax call to process user input via an external file and then show the result. Below is the code that works and also displays the entered Username in the Modal Title.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="faviconmoney.ico"/>
<meta charset="utf-8">
<title>Employee Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul class="nav nav-pills">
<li role="presentation" class="active">Expenses</li>
<li role="presentation">Employee Data</li>
<li role="presentation">Logout</li>
</ul>
<hr />
</div>
<div>
<form role="form" method="post" id="user">
<div class="col-md-4">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
</div>
<div class="form-group">
<label for="first name">First Name:</label>
<input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
</div>
<div class="form-group">
<label for="last name">Last Name:</label>
<input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
</div>
<!-- <button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button> -->
<button type="submit" class="btn btn-default" id="modelSubmit1">Submit</button>
</div>
</form>
</div>
<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" id="myModalLabel">
Username Entered is <strong><span id="username_value">UserName</span></strong>.
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
$('form#user').submit( function(e){
e.preventDefault();
var username = $('#username').val();
var dataString = "username="+username;
// $('#myModal').modal({ show: false});
$.ajax({
type: "POST",
url: "form-submission.php", // Name of the php files
data: dataString,
success: function(html)
{
$("#username_value").html(html);
$('#myModal').modal('show');
}
});
});
</script>
</body>
</html>
Note that I have used <span id="username_value"> to display the entered text in the middle of an HTML text.
Below is the code of external PHP file that you can use to process data entered. Which means, the modal will only show once the entry is processed successfully.
<?php
if ($_POST) {
$username_value = $_POST['username'];
echo $username_value;
}
?>
Hope this helps.
I've got a modal with a grid layout because I put the labels above each field. That mostly works but they fill the entire Modal running right up to the left/right edges. I don't seem to have that trouble with the demo from the bootstrap site but those are text fields instead of and tags. I played around with the form-control class but that seemed to make matters worse. Is there a class I'm missing?
Here's a JSfiddle of my code: https://jsfiddle.net/jdnag6zx/
<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/jdnag6zx/-->
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="column-type" class="col-lg-4 control-label">Date</label>
<label for="column-type" class="col-lg-4 control-label">Separator</label>
<label for="column-type" class="col-lg-4 control-label">Example</label>
</div>
<div class="row">
<select class="col-lg-4" id="date-format" >
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
<select class="col-lg-4" id="date-separator">
<option>/</option>
<option>-</option>
</select>
<input class="col-lg-4" id="date-example" value="1-1-2017"></input>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
Remove the .row classes from .modal-body https://jsfiddle.net/jdnag6zx/1/
This is a better approach!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<label for="column-type" class="control-label">Date</label>
<select class="form-control" id="date-format">
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Separator</label>
<select class="form-control" id="date-separator">
<option>/</option>
<option>-</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Example</label>
<input class="form-control" id="date-example" value="1-1-2017" />
</div>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
Use bootstrap table instead of cols check this fiddle
I am having Issues with the modal, it opens on loading and does not respond to clicks to close it. Not sure what the Issue is. Attached is the code I have. How do I make the modal open as I click the button and close when I click the x
<html lang="en">
<head>
<meta chart="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewort" content="width=device-width, intial-scal=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.min.js"></script>
<title>Bootstrap</title>
</head>
<body>
<!-- signup button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupform">
Signup
</button>
<!-- log in button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginform">Login</button> -->
<!-- popup signup form-->
<div class="modal-fade" id="signupform">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>
×
</span>
</button>
<h4 class="modal-title"> Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
First Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Last Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Email:
</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Confirm Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</div>
</div>
ref: getbootstrap.com/javascript/#modals