How to create modal on button click in Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codelizar Modal Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Modal Button</h2>
<button id="btn_box" class="btn btn-success" type="button" data-target="#div_box" data-toggle="modal">Open Me</button>
<div class="modal fade" id="div_box" role="dialog">
<div class="modal-dialog">
<!--Modal Content Part-->
<div class="modal-content">
<!--Modal Heading Part-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Codelizar Modal Heading</h4>
</div>
<!--Modal Body Part-->
<div class="modal-body">
<div class="row">
<div class="col-md-3 form-group">
<label for="username"></label>
<input type="text" value="" name="username" class="form-control">
</div>
<div class="col-md-3 form-group">
<label for="password"></label>
<input type="text" value="" name="password" class="form-control">
</div>
<div class="col-md-3 form-group">
<button name="btn_submit" type="submit" class="btn btn-info">Submit Me</button>
</div>
</div>
<!--Modal Footer Part-->
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Exit Now</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
