Bootstrap modal dialog box/popup window

bootstrap modal dialog box
In this article, we are discussing bootstrap modal dialog box/popup window. It is very easy to implement bootstrap modal dialog box without writing a single line of javascript code.

As we all know that bootstrap is very famous for responsive web design which will support maximum devices and view ports. So by using bootstrap modal dialog box you no need to worry about responsive web design for this dialog box/popup window.

Refer below is the complete code of bootstrap modal dialog box and code explanation as follows.

The “Modal Trigger” section:
To trigger the modal window, you need to use a button or a link which includes the two data-* attributes.

1. data-toggle=”modal” opens the modal window
2. data-target=”#myModal” points to the id of the modal

The “Modal Dialog/Box” section:
The parent “

” of the modal dialog box must have an ID which should match the value of the data-target attribute used to trigger the modal (“myModal”) in the button or link.

The attribute role=”dialog” improves accessibility for people using screen readers.

The .modal-dialog class sets the proper width and margin of the modal dialog box.

The “Modal content” section:
The .modal-content class is used to style the modal border, background, etc. Inside this, we have modal’s header, content and footer sections.

The .modal-header class is used to define the styles for header section. Inside that, we have close and title options.

The .modal-body class is used to define the style for the body of the modal dialog box. Add any HTML markup here; paragraphs, images, videos, etc.

The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right aligned by default.

<!DOCTYPE html> 
<html lang="en">
<head>
<title>
Example for bootstrap modal dialogbox
</title>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.top-buffer { margin-top:120px; }
</style>
</head>
<body>
<div class="container">

<div class="top-buffer">
	<!-- Trigger the modal with a button -->
	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade top-buffer" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
		
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Download / Demo

You may also like...