How to create modal on button click in Bootstrap

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">&times;</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>

 

Leave a Reply

Your email address will not be published. Required fields are marked *