content logo

Bootstrap Popups:

Bootstrap 5 Modal with jQuery

If you own a website and like to improve in a short time, this post can be helpful. This is the Bootstrap 5 Modal with jQuery that we have prepared with a beautiful design. With the help of this amazing Bootstrap 5 Popup, you can differentiate Your website’s theme and attract more people easily. If you want to give a message to the users of your website, this Popup Code with jQuery can help you to achieve this purpose. For example, you can use this HTML Popup Snippet to represent the discount of the products.

There is a preview of this Responsive Modal Code down below and you can see its beautiful design. As you see, this code has an orange theme and the texts are white. There are two thin lines at the top and the bottom of the orange page. You can add any information on this page that you like. You can see a cross icon at the corner of the page. Plus, a red button is located at the end of the page with white text. The term “Close” is written on this button. As you click on each of these buttons, the orange page will disappear and you see a white and pure page in this JavaScript Popup Code.

#

Bootstrap 5 Popup

#

Popup Code with jQuery

#

HTML Popup Snippet

#

Responsive Modal Code

#

Javascript Popup Code

<!-- This script got from frontendfreecode.com -->
<div class="XXXXX__modal modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h2 class="modal-title">Everyone is out eating lunch.</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <p>We enjoy our lunch here but we will be back soon.</p>
                <h4>For emergency service, call:</h4>
                <p>Steve - 555-555-5555</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.XXXXX__modal .modal-content {
    background-color: tomato;
}
.XXXXX__modal .modal-content h2,
.XXXXX__modal .modal-content p,
.XXXXX__modal .modal-content h4,
.XXXXX__modal .modal-content a,
.XXXXX__modal .modal-content a:hover {
    color: #ffffff;
}
$(document).ready(function () {
    $("#myModal").modal("show");
});
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css'>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css'>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js'></script>
<style>
.XXXXX__modal .modal-content {
    background-color: tomato;
}
.XXXXX__modal .modal-content h2,
.XXXXX__modal .modal-content p,
.XXXXX__modal .modal-content h4,
.XXXXX__modal .modal-content a,
.XXXXX__modal .modal-content a:hover {
    color: #ffffff;
}
</style>

</head>
<body>
<div class="XXXXX__modal modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h2 class="modal-title">Everyone is out eating lunch.</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <p>We enjoy our lunch here but we will be back soon.</p>
                <h4>For emergency service, call:</h4>
                <p>Steve - 555-555-5555</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    $("#myModal").modal("show");
});
</script>

</body>
</html>
Preview