In the below example,
Trigger : The modal window is triggered with a button or a link and adds two data-* attributes.
data-toggle="modal" : Modal window is opened by using this window.
data-target="#myModal" : Modal id is pointed by using this window.
Modal : The modal ID in <div> should be equal to the data-target attribute value, which is used to trigger the modal ("myModal").
.modal class : This identifies the <div> content as a modal and focuses on it.
.fade class : Bootstrap Transition effect to modal is applied by using this class which fades the modal in and out.
Attribute
role="dialog" : This attribute is useful for screen readers to improve accessibility.
.modal-dialog class : Modal width and margin can be set by using this class.
Modal content : The .modal-content class applies styles to modal (border, background-color, etc.). Modal's header, body, and footer can be added to <div>.
.modal-header class : defines header style of the modal.
data-dismiss="modal" attribute has a button that closes the modal when clicked and applies style to the close button by using
.close class, and the header line-height is set by using the
.modal-title class.
.modal-body : To define the style for the modal body .modal-body class is used.
.modal-footer class : This class is used to define the style for the modal footer. Note that by default this area is right aligned.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Media List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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-dismiss="modal">×</button>
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
Do you want to save changes you made to document before closing?
<small>If you don't save, your changes will be lost.</small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/html]
Output: