Modal does opens but does not close? - javascript

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

Related

Prevent Bootstrap Modal if not Validated

How can I prevent the modal from popping up if all of the required fields are not validated?
As you can see, the validation works in the background, but I'm trying to present a summary of the form in the modal and I don't want it to display if it is not filled out correctly.
I would like the modal to just not display and force the user to correct the needed elements.
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
// modalOn();
});
}, false);
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationCustom01">Name</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="invalid-feedback">
Please provide your name.
</div>
</div>
<div class="mb-3">
<label for="validationCustom01">Email</label>
<input type="email" class="form-control" id="validationCustom01" required>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<div class="mb-3">
<label for="validationCustom01">Phone</label>
<input type="tel" class="form-control" id="phone" pattern="\d{3}-\d{3}-\d{4}" required>
<div class="invalid-feedback">
Please provide a valid phone number.
</div>
</div>
<br>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- <div class="container">
<div class="row">
<div class="col text-center">
<button class="btn btn-primary" id="submit-button">Submit form</button>
</div>
</div>
</div> -->
</form>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js"
integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
crossorigin="anonymous"></script>
</body>

Append a radio button with JQuery with label and have it work?

I have appended a radio button with JQuery, but for some reason it won't let me select the button when clicking the label. It works in HTML if you don't use jquery, so what am I missing:
$(document).on("shown.bs.modal", "#signmein", function(e) {
var html = '<input type="radio" name="colour" value="red" id="colour_red"><label for="colour_red">Red</label><br>';
$('#modalload').append(html);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>
<div class="modal" id="signmein">
<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>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div>
<label>The Field Label</label>
<div class="input-append">
<div class="btn-group pull-left" data-toggle="buttons">
<div id="modalload"></div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
https://www.bootply.com/yy3eAGjgGG
There is an event handler somewhere that is preventing the default behavior of your label, I couldn't actually find it but stopping the propagation of the event fised it.
$(document).on("click","#modalload label", function (e) {
e.stopPropagation();
});
$(document).on("shown.bs.modal","#signmein", function (e) {
var html = '<input type="radio" name="colour" value="red" id="colour_red"><label onclick="/*event.stopPropagation();*/" for="colour_red">Red</label><br>';
$('#modalload').html(html);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>
<div class="modal" id="signmein">
<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>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div>
<label>The Field Label</label>
<div class="input-append">
<div class="btn-group pull-left" data-toggle="buttons">
<div id="modalload"></div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</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?

Bootstrap modal grid layout missing padding

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

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>

Categories