Bootstrap Modal Plugin is a popup window that is used to display content, notification alerts, Registration and Login form on the website.
In this tutorial we are going to learn, How to create Responsive Bootstrap Modal Plugin by using Bootstrap, HTML, CSS and Javascript.
The below Key features of the responsive Bootstrap Modal Plugin
- Easy to integrate in any websites
- Mobile Friendly modal popup
- Responsive layout
- Header, Footer and separate content section
- Modal with close button and bootstrap modal with cancel button.
- Background freeze when click on modal popup.
- Support all browsers
Requirement
- Bootstrap Jquery Library
- Bootstrap CSS Library
- HTML5
Follow the below steps to Create the Bootstrap Modal Plugin
Library Files
Create index.html and copy the below Javascript, CSS link and paste on the header section in index.html file. These file can also download from ajax library, and bootstrap library.
|
1 2 3 4 5 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
HTML Code
Paste the below HTML code in index.html body section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<div class="main-content"> <div class="form-content"> <h2>Modal Popup Live Demo -1</h2> <p>Modal popup don't close on click outside</p> <!-- Button to Open the Modal --> <div><a href="#" class="btn btn-primary" id="clickHere">Bootstrap Modal</a></div> </div> <div class="form-content"> <h2>Modal Popup Live Demo -2</h2> <p>Modal popup closed when clicking outside.</p> <!-- Button to Open the Modal --> <div> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> Bootstrap Modal </button> </div> </div> </div> <!-- Example 1 --> <div class="modal" id="popup"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Heading Here...</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body">Body Content ...</div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Example 2 --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Heading Here...</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Body Content ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Submit</button> </div> </div> </div> </div> |
Javascript Code
Place the below Javascript code in the footer section on index.html page. This Javascript code dose doesn’t allow to close Bootstrap Modal Plugin on click outside.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function () { $("#popup").modal({ show: false, backdrop: "static", }); $("#clickHere").click(function () { $("#popup").modal("show"); }); }); </script> |
CSS Code
Create the style.css in css folder and paste the below CSS on it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.main-content { width: 650px; background: #ef5d06; color: #000; margin: 0 auto; padding: 20px; } h2 { text-align: center; font-size: 25px; font-family:'Muli SemiBold'; font-weight:normal; } .form-content { background: #f7f7f7; padding: 10px; text-align: center; margin-bottom: 1px; } .form-content input { width: 50%; border: 1px solid #ccc; padding: 7px; } |
Conclusion
Bootstrap Modal Plugin project source code download by clicking on the download button or check the demo link.
Share this:
Related Post
