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>