Modal pop up one time per user

Question

In my website, I am using a simple modal popup with some input controls ( name, email, button). The purpose of modal popup is:

• After filling all mandatory fields, if user press "submit" button they will get one .pdf file.
• I launch the modal upon onload.

Here, I am trying to do:

1. Open the modal popup only once for a user, or
2. Don't want to show the modal popup to users who previously filled out the form already

Here is the code of my modal popup:

<script type="text/javascript">
$(document).ready(function () {
    $("#eBookModal").modal('show');
});
</script>

<div class="modal fade" id="eBookModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="row">
                    <h4 class="modal-title text-center" style="color:#FFFFFF;">Download eBook</h4>
                </div>
            </div>
            <div class="modal-body">
                <form role="form" id="eBookform" class="contact-form"
                      action="file.pdf">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control form-text" name="FName" autocomplete="off" id="eBook_FName" placeholder="First Name" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control form-text" name="LName" autocomplete="off" id="eBook_LName" placeholder="Last Name" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="email" class="form-control form-text" name="email" autocomplete="off" id="eBook_email" placeholder="E-mail" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center" id="eBook_download">
                            <button type="submit" class="btn main-btn" style="color:#fff !important;">Download Now</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

You have to keep record of the modal displays. To store that info, you can either use a cookie or the localStorage. Based on the stored value, you can decide whether to show the modal or not.

The sample below uses the localStorage as an example:

$(document).ready(function () {
    // Check if user saw the modal
    var key = 'hadModal',
        hadModal = localStorage.getItem(key);

    // Show the modal only if new user
    if (!hadModal) {
        $('#eBookModal').modal('show');
    }

    // If modal is displayed, store that in localStorage
    $('#eBookModal').on('shown.bs.modal', function () {
        localStorage.setItem(key, true);
    })
});

Available as a Codepen too.

If you would like to hide the modal just from those who already submitted the form, you should set the flag upon form submit, like so:

$('#eBookform').on('submit', function (event) {
    // event.preventDefault();// depending on your use case
    localStorage.setItem(key, true);
})

Note: to reset the stored value, just call localStorage.removeItem('hadModal').

Answer 2

If you just to show the modal one time for first time visit and previous code didn't work try this !

$(window).load(function(){    
var Modal = document.getElementById('myModal'); 
var key = 'hadModal',
hadModal = localStorage.getItem(key);

if (!hadModal) {
    Modal.style.display = "block";
    localStorage.setItem(key, true);
}

});  

Answer 3

How do you get this script to work in Bootstrap 5 without using jQuery?

$(document).ready(function () {
// Check if user saw the modal
var key = 'hadModal',
    hadModal = localStorage.getItem(key);

// Show the modal only if new user
if (!hadModal) {
    $('#eBookModal').modal('show');
}

// If modal is displayed, store that in localStorage
$('#eBookModal').on('shown.bs.modal', function () {
    localStorage.setItem(key, true);
})

});