"Model Bootstrap5"
Bootstrap 4.1.1 Snippet by ranjit1602

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous"> </head> <body> <div class="row"> <div class="col-lg-12 text-center"> <h2>Model popup file</h2> <a href="#" class="btn btn-info btn-lg" data-bs-toggle="modal" data-bs-target="#myModal">Applay Form</a> <a href="#" class="btn btn-info btn-lg" data-bs-toggle="modal" data-bs-target="#myModal">Applay Form</a> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-bs-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body text-left"> <form action="#"> <div class="form-group text-left"> <label>Name</label> <input type="text" class="form-control" placeholder="Name"> <label>Email</label> <input type="email" class="form-control" placeholder="password"> <label>Email</label> <input type="phone Number" class="form-control" placeholder="password"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script> <script> </script> </body> </html>
$(document).on("click","#cust_btn",function(){ $("#myModal").modal("toggle"); })

Related: See More

Material Dashboard Pro React

Questions / Comments: