Bootstrap Modal Plugin Example and Tutorial

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

1. Easy to integrate in any websites
2. Mobile Friendly modal popup
3. Responsive layout
4. Header, Footer and separate content section
5. Modal with close button and bootstrap modal with cancel button.
6. Background freeze when click on modal popup.
7. Support all browsers

Requirement

1. Bootstrap Jquery Library
2. Bootstrap CSS Library
3. 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.

<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.

<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">&times;</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">&times;</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.

<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.

.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.