Bootstrap Modal

Modal

The Modal plugin is a dialog box/popup window that is displayed on top of the current page

Plugins can be included individually "modal.js" or "bootstrap.js" or "bootstrap.min.js".

Trigger Part

To trigger the modal window, you need to use a button or a link.

Modal Part

The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal ("myModal").

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutor Joes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
    <style>
        hr{
            margin-top: 15px;
            margin-bottom: 15px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container" style="margin-top:20px;">
		<div class="row">
		<h2 class="page-header">Login Using Modal</h2>
			<div class="col-md-12">
				<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Click to open login form</button>
				<!-- Modal -->
				<div id="myModal" class="modal fade" role="dialog">
				  <div class="modal-dialog">
					<!-- Modal content-->
					<div class="modal-content">
					  <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Login</h4>
					  </div>
					  <div class="modal-body">
						<form action="#">
						  <div class="form-group">
							<label for="name">User Name:</label>
							<input type="text" class="form-control" id="name">
						  </div>
						  <div class="form-group">
							<label for="pass">Password:</label>
							<input type="password" class="form-control" id="pass">
						  </div>
						  <button type="submit" class="btn btn-primary">Submit</button>
						</form>
					  </div>
					  <div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
					  </div>
					</div>
				  </div>
				</div>
			</div>
		</div>
	</div>
    <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>
    <!--<script src="js/jquery.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
</body>
</html>

To download raw file Click Here

Modal

Trigger Part

Modal Part

Source Code

Bootstrap Tutorial