Bootstrap Snippet Show Modal after 3 Clicks on Website using HTML Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a href="#" onclick="clickCounter()">Test 1</a>
<a href="#" onclick="clickCounter()">Test 2</a>
<a href="#" onclick="clickCounter()">Test 3</a>
<a href="#" onclick="clickCounter()">Test 4</a>
<a href="#" onclick="clickCounter()">Test 5</a>
<a href="#" onclick="clickCounter()">Test 6</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Yay!</h3>
    </div>
    <div class="modal-body">
        <p>Woohoo!</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  function clickCounter() {
    if(typeof(Storage) !== "undefined") {
      if (localStorage.clickcount) {
        localStorage.clickcount = Number(localStorage.clickcount)+1;
      } else {
        localStorage.clickcount = 1;
      }
      console.log( localStorage.clickcount + " click(s).");
    } else {
      console.log("Sorry, your browser does not support web storage...");
    }
  }
  if ( localStorage.clickcount == 3 ){
    setTimeout(function() {
      $('#myModal').modal('show');
    }, 2000);
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Show Modal after 3 Clicks on Website"
Bootstrap 3.3.0 Snippet by thecenteno

Related: See More

Questions / Comments:

"Show Modal after 3 Clicks on Website" Bootstrap 3.3.0 Snippet by thecenteno

Related: See More

Questions / Comments:

"Show Modal after 3 Clicks on Website"
Bootstrap 3.3.0 Snippet by thecenteno