How To Use Newsletter modal when your website loading finished.

Using this code you can demonstrate the newsletter modal in your HTML website. You can customize it as you want.

So let’s go…

HTML

<div class="modal fade newsletter-modal" id="newsletter-modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">
                    <i class="fa-solid fa-xmark"></i>
                </span>
            </button>

            <div class="modal-body">
               <div class="newsletter-modal-content">
                    <div class="newsletter-content">
                        <h4>Subscribe to our newsletter</h4>
                        <p>Enter your email to our newsletter and get 25% off your first purchase</p>
                        <form class="newsletter-form">
                            <input type="email" class="form-control" placeholder="Your email address">
                            <input type="text" class="form-control" placeholder="name">
                            <button class="default-btn" type="submit">
                                Subscribe Now
                            </button>
                        </form>
                        <ul class="d-flex justify-content-between">
                            <li>
                                <div class="social-content">
                                    <a href="https://instagram.com/?lang=en" target="_blank"><i class="fa-brands fa-instagram"></i></a>

                                    <a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>

                                    <a href="https://linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>

                                    <a href="https://www.pinterest.com" target="_blank"><i class="fa-brands fa-pinterest-p"></i></a>
                                </div>
                            </li>
                            <li>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="popupcheck">
                                    <label class="form-check-label" for="popupcheck">
                                        Don’t show this popup again
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </div>
               </div>
            </div>
        </div>
    </div>
</div>

CSS

.newsletter-modal {
    &.modal {
        &.fade {
            .modal-dialog {
                max-width: 650px;
                margin: auto;
            }
        }
    }
    .modal-content {
       background-color: #ffffff;
       padding: 60px;
        .modal-body {
            padding: 0;
        }
        button {
            &.close {
                position: absolute;
                right: 15px;
                top: 15px;
                outline: 0;
                opacity: 1;
                color: #000000;
                background-color: #ffffff;
                transition: all ease .5s;
                line-height: 35px;
                padding: 0;
                margin: 0;
                font-size: 20px;
                width: 40px;
                text-shadow: unset;
                height: 40px;
                border-radius: 100%;
                border: none;
                box-shadow: 0px 4px 4px rgba(18, 18, 18, 0.05);
                &:hover {
                    color: #ffffff;
                    background-color: red;
                }
            }
        }
        .newsletter-modal-content {
            .newsletter-content {
                padding: 30px;
                background-color: #ffffff;
                h4 {
                    font-size: 18px;
                    margin-bottom: 10px;
                }
                p {
                    margin-bottom: 30px;
                }
                .newsletter-form {
                    .form-control {
                        margin-bottom: 20px;
                    }
                    .default-btn {
                        width: 100%;
                    }
                }
                ul {
                    padding-left: 0;
                    margin-bottom: 0;
                    margin-top: 40px;
                    li {
                        list-style-type: none;
                        .social-content {
                            a {
                                color: #757575;
                                font-size: 18px;
                                transition: all ease .5s;
                                margin-right: 15px;
                                &:last-child {
                                    margin-right: 0;
                                }
                                &:hover {
                                    color: red;
                                }
                            }
                        }
                        .form-check {
                            .form-check-input {
                                height: 16px;
                                width: 16px;
                                box-shadow: unset;
                                position: relative;
                                top: -1px;
                            }
                        }
                    }
                }
            }
        }
    }
}

JS

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds
    
    setTimeout(function(){
        $('#newsletter-modal').modal('show');
    }, delayMs);
});