Automatically open modal only one time in whole website in javascript

Question

I am using java, java script and bootstrap to open the modal. But i want this modal only one time if user click to cancel then it should not appear or it should not display after page reloading.

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Subscribe our Newsletter</h4>
            </div>
            <div class="modal-body">
                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD">

            </div>
        </div>
    </div>
</div>

JAVA SCRIPT:

$(document).ready(function(){
            setTimeout(function(){
        $("#myModal").modal('show');
    },3000);
    });

I have seen one more link, But i did not get idea. Link is: Get cookie by name

In my code modal show in a page But when reload the page it will come. Whenever reload the page it will comes. But i want user cancel the modal then it should not come in whole website. I will put this modal in header of the website because header is same for all the pages. My website is https://www.winni.in

I want modal only one time in my website. If user land in any page first time modal should be display.

Answer 1

You need something to hold the status of modal opening, you should be able to use local storage to do so, however cookie would be more trouble-free in most cases.

See below for a code sample:

    $(document).ready(function(){
            setTimeout(function(){
            if(!Cookies.get('modalShown')) {
                $("#myModal").modal('show');
              Cookies.set('modalShown', true);
            } else {
                alert('Your modal won\'t show again as it\'s shown before.');
            }

    },3000);
 });

Runnable online example: http://jsfiddle.net/z3bh5gh2/2/

Update:

I recommend to use this plugin to create modals: https://github.com/nakupanda/bootstrap3-dialog

This example doing the same thing using BootstrapDialog as your example does, but the code looks more clean and neat:

$(document).ready(function(){
setTimeout(function(){
    BootstrapDialog.show({
    title: 'Subscribe our Newsletter',
    message: '<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD">'
  });   
},3000);

});

And again, here is an online example http://jsfiddle.net/n7mkLoko/1/

Answer 2

At a high-level, you need to do two things:

1. Before showing the modal dialogue, you need to issue an authenticated request to your server to determine whether the modal dialogue has already been shown. By "authenticated", I mean that it contains information identifying the browser and/or user (depending on whether the state is persisted for a browser session or for a user across all browsers).

2. After the dialogue has been dismissed, you will need to similarly issue an authenticated request to record this new state so that it can be returned in #1 when the website is reloaded.

Since #2 changes the state, it should be done with a HTTP POST operation, while #1 should be done with a GET since it merely checks the value of the state. In terms of persisting authentication, you will do so using a cookie; typically, you want the cookie to be a large, randomly assigned, frequently changing, unguessable number that acts as a key into your database for the record(s) associated with a particular user session. That session, in turn, would (on the server) indicate the logged-in user(s) in that session and thus acts as a conduit to any other account-specific stored information.

Your example code seems to be missing these two core elements; the function that you have in setTimeout() does not consult the server (nor have you indicated that the server does any such checking before it decides to emit this JavaScript), nor does the function do anything to update/persist the fact that the dialogue has been shown. While, in just JavaScript, you can store the modal dialogue state directly in a cookie (though this is generally a bad idea for privacy/security reasons, since state stored directly in cookies can be manipulated on the client and can act as an identifying fingerprint); if you want this to be remembered across browsers, a server-side element will be required.

Answer 3

You can do it using sessions This is how you set a session using java and javascipt

Create a new servlet and trigger an AJAX call as below. Then i set comboboxvalue to session from servlet and check the session value and based on it you can show or not show the modal Refer this too

    this._on( this.input, {
    autocompleteselect: function( event, ui ) {
        $.ajax({
        type: 'POST',
        url: 'AjaxServlet',
        dataType : 'json',
        data: { comboboxvalue : ui.item.value  }
        });
        ui.item.option.selected = true;
        this._trigger( "select", event, {
            item: ui.item.option
        });
    },

    autocompletechange: "_removeIfInvalid"
});