Display Alerts on Modal with Spring MVC - javascript

I am using Spring Boot and thymeleaf for my web application. For implementing Forgot password feature I am having modal in login.html.After submitting the form to controller, to display success or error alerts on modal I used AJAX call. But the alerts are displayed on login page not on modal. Below is the code..
LoginController.java
#RequestMapping(value = "/forgotPassword", method = RequestMethod.POST)
public ModelAndView processForgotPasswordForm(ModelAndView modelAndView, #RequestParam("email") String email) {
UserDetails userDetails = userService.findUserByEmail(email);
if (null == userDetails) {
modelAndView.addObject("errorMessage", "Entered email doesn't exist in records");
modelAndView.setViewName("login");
return modelAndView;
}
boolean generatedToken = userService.generatePassResetToken(userDetails);
if (generatedToken) {
modelAndView.addObject("successMessage", Constants.PASSWORD_EMAIL_LINK);
}
modelAndView.setViewName("login");
return modelAndView;
}
app.js
$(function(){
$("#passForgot").on('submit',function(e){
e.preventDefault();
$form= $(this);
$.post("forgotPassword", $(this).serialize(),function(data){
$feedback = $("<div>").html(data).find(".form-feedback").hide();
$form.prepend($feedback)[0].reset();
$feedback.fadeIn(500);
});
});
})
login.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login Page</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/login.css}" />
<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.1.1/jquery.min.js"></script>
<script th:src="#{/js/app.js}"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-footer {
border-top: 0px;
}
</style>
</head>
<body>
<div class="container">
<img th:src="#{/images/login.jpg}" class="img-responsive center-block"
width="300" height="300" alt="Logo" />
<form th:action="#{/login}" method="POST" class="form-signin">
<h3 class="form-signin-heading" th:text="Welcome"></h3>
<br /> <input type="text" id="userName" name="userName"
required="required" th:placeholder="Username" class="form-control" />
<br /> <input type="password" th:placeholder="Password"
required="required" id="password" name="password"
class="form-control" /> <br />
<div>
<input type='checkbox' name="remember-me-param" /> Remember Me<br />
</div>
<!-- Forgot Password?<br> -->
<br>
<div align="center" th:if="${param.error}">
<p style="font-size: 20; color: #FF1C19;">Username or Password
invalid, please verify</p>
</div>
<button class="btn btn-lg btn-primary btn-block" name="Submit"
value="Login" type="Submit" th:text="Login"></button>
<br> <br>
<div class="container">
<a href="#" data-target="#pwdModal" data-toggle="modal">Forgot
Password?</a>
</div>
</form>
</div>
<!--modal-->
<form action="forgotPassword" id="passForgot" method="post">
<div id="pwdModal" class="modal fade" 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">×</button>
<h1 class="text-center">LOGO</h1>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<div th:if="${successMessage}"
class="alert alert-success alert-dismissible form-feedback" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div th:text=${successMessage}></div>
</div>
<div th:if="${errorMessage}"
class="alert alert-danger alert-dismissible form-feedback" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div th:text=${errorMessage}></div>
</div>
<div
style="font-size: 17px; line-height: 21px; margin-top: 5px; padding-bottom: 14px; color: #333333;"
align="center">
To reset your password, enter the email <br>address associated
with your account below.<br>
</div>
<div class="panel-body">
<fieldset>
<div class="form-group input-group has-feedback">
<span class="input-group-addon"> <span
class="glyphicon glyphicon-envelope "></span>
</span> <input type="email" placeholder="Email Address"
class="form-control" name="email"
required /> <span
class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<input class="btn btn-lg btn-primary btn-block"
value="Send Email" type="submit">
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Login Page with Modal
Error alerts displaying on login form but not on modal
What's wrong with this code ?

Related

How do I trigger a Modal with JavaScript?

I want to show a modal in my document when I click on an element. I am able to make it work with default bootstrap 'data-toggle' and 'data-target' attributes. But when I try to achieve the same effect with JavaScript, the modal is not showing up. Here is the relevant code:
<span class="navbar-text">
<a href="" id="login">
<span class="fa fa-sign-in fa-lg"></span>
Login
</a>
</span>
<script>
$(document).ready(function () {
$("#login").click(function () {
$("#loginModal").modal('show');
});
});
</script>
It just appears to fade in the modal for a split second but it does not show up.
Below is the modal div which I am trying to show:
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3"
placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>

Your code is correct, but you have not provided any HTML. I can only assume you followed the guides below to set up your site.
Edit: Since you provided your HTML, your problem is your href is empty, so it is going to an empty page. Change the anchor href to # or make it a button like in my full example below.
<a href="#" id="login">
Here is a perfect explanation: href must not reload. You can even throw in an onClick event for good measure.
Your fixed code
$(function() {
$("#login").click(function() {
$("#loginModal").modal('show');
});
});
.navbar-text {
display: block;
border: thin solid #007bff;
margin: 1em;
padding: 0.5em;
border-radius: 0.5em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<span class="navbar-text">
<a href="#" id="login">
<span class="fa fa-sign-in fa-lg"></span> Login
</a>
</span>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
Full button example
The Modal documentation has multiple examples of windows. I combined four documentation examples below to create a usable "Log In" function for a Bootstrap site.
Important steps
Ensure your button id is "login"
Ensure your modal window id is "loginModal"
Ensure your modal window is laid-out correctly
Ensure your modal window has the correct fade class
Resources
https://getbootstrap.com/docs/4.0/getting-started/download/
https://getbootstrap.com/docs/4.0/examples/pricing/
https://getbootstrap.com/docs/4.0/components/modal/
https://getbootstrap.com/docs/4.0/components/forms/
$(function() {
$("#login").click(function() {
$("#loginModal").modal('show');
});
});
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" id="login" href="#">
<span class="fa fa-sign-in fa-lg"></span> Log In
</a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Pricing</h1>
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
</div>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Log In</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Log In</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

bootstrap modal1 is not close until modal2 close

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>

Bootstrap Modal Log-In Form Disappears Immediately?

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?

How to open Modal popup on button click

I have this link-button:
<button class="btn btn-primary pull-right" id="btn">Read More</button>
I want onclick hit, a modal popup appears with all the article details.I have tried a lot until now but nothing runs properly.Any ideas?
UPDATED
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false
})
$('#btn').click(function() {
$("#dialog").dialog({
modal: true,
height: 600,
width: 500,
buttons: {
Accept: function() {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
});
});
UPDATED (image)

If you are using Bootstrap , please see below example
<div class="modal fade" id="modelWindow" role="dialog">
<div class="modal-dialog modal-sm vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Heading</h4>
</div>
<div class="modal-body">
Body text here
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
$('#btn').click(function() {
$('#modelWindow').modal('show');
});

I think the main problem is with this code:
<a href="">
As there is no value in href, so whenever you'll click on the button actually it will click on that anchor tag and the page will refresh. You can use this:
<a href="javascript:void(0);">
Or on the click function you can get the event and use preventDefault.
Hope this will help you.
Thanks.

I get it without using some custom css or js. It works with bootstrap.js and bootsrap.css.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<!--> Your Dialog Field -->
<div class="dialog">
Some Text Some Captions and/or images etc..
<button class="btn btn-warning" data-toggle="modal" data-target="#modal1">Show More</button>
</div>
<!--> Your Modal Field -->
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modallabel1" aria-hidden= "true">
<h1>Some Text for the Modals
Some Text for the Modals
Some Text for the Modals
Some Text for the Modals</h1>
</div>
</html>
There are better examples (Bootstrap Modals), but this works without own js.

You can follow instructions to use Booststrap Modal Popup
Step:-1
Add Bootstrap Modal Container
**Step:-2** Add Button to Show Modal Popup
Save
function getBuiltyUpdateForm(id, dcNo) {
$('#builtyUpdateModal').modal('show');
}
function saveRecord() {
alert{"It's Working"}
}
<a onclick="getBuiltyUpdateForm()" class="btn btn-sm btn-warning btn-lg m-t-n-xs"><i class="fa fa-plus" title="Update"></i></a>
<div class="container">
<div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px">
<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">Add Builty Number</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<label>DC Number</label>
<input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" disabled autocomplete="off" class="form-control" />
<p id="dcNumber"></p>
</div>
<div class="col-md-3">
<label>Builty Date</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="builtyDate" data-validation="required" data-validation-error-msg="Date is required" data-validation-error-msg-container="#builtyDate" class="form-control custom-date-picker" type="text" value="31-May-2022" disabled />
</div>
<p id="builtyDate"></p>
</div>
<div class="col-md-6">
<input type="hidden" id="hdndcId" />
<label>Builty Number</label>
<input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" />
<p id="builtyNumber"></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> </div>
**Step:-3**
Write HTMl Code For Modal
×
Add Builty Number
DC Number
Builty Date
Builty Number
Submit
Close
function saveRecord(){ alert("It's Working") }
<div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px">
<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">Add Builty Number</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<label>DC Number</label>
<input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" disabled autocomplete="off" class="form-control" />
<p id="dcNumber"></p>
</div>
<div class="col-md-3">
<label>Builty Date</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="builtyDate" data-validation="required" data-validation-error-msg="Date is required" data-validation-error-msg-container="#builtyDate" class="form-control custom-date-picker" type="text" value="31-May-2022" disabled />
</div>
<p id="builtyDate"></p>
</div>
<div class="col-md-6">
<input type="hidden" id="hdndcId" />
<label>Builty Number</label>
<input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" />
<p id="builtyNumber"></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="builtyNumberUpdatebtn" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
function saveRecord(){ alert("It's Working") }
<div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px">
<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">Add Builty Number</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<label>Field 1</label>
<input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" autocomplete="off" class="form-control" />
<p id="dcNumber"></p>
</div>
<div class="col-md-3">
<input type="hidden" id="hdndcId" />
<label>Field 2</label>
<input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" />
<p id="builtyNumber"></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="builtyNumberUpdatebtn" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Modal does opens but does not close?

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

Categories