Cookie based popup/Modal for first time visitors only

Post Reply
User avatar
hiccup
Site Admin
Posts: 20
Joined: Sat Aug 01, 2015 8:44 pm

Cookie based popup/Modal for first time visitors only

Post by hiccup » Thu Feb 21, 2019 4:37 pm

Code: html Select all

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info hidden btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close hidden" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Terms</h4>
        </div>
        <div class="modal-body">
          <img style="max-width: 200px; margin: 0 auto" src="/images/logo.png" alt="" class="img-responsive text-center">
          <br>
          <p>TerpenesForCarts.com was established to help people discuss matters pertaining to the Cannabis Vape 
Cartridge Community</p>
          <p>Including Terpenes, Preferred Cartridges, Custom Recipes, and Favorite Brands - Please respect each other and keep it civil.</p>
          <h3>Rules</h3>
          <hr>
          <p>By entering TerpenesForCarts.com (A DabJuice Inc Company), you agree to the following:</p>
          <ul>
            <li>You are over the Age of 18.</li>
            <li>Cannabis Related Discussions are permitted in your territory.</li>
            <li>Harassment, Racial Slurs, Threats, Solicitation of illegal activity, Blackmailing, or Stalking will result in 
a permanent ban.</li>
          </ul>
          <p><strong>Please note: </strong></p>
          <p>Your Information is Most important to us, and we will NEVER Sell your information EVER.</p>
          <p>-TerpenesForCarts.com</p>
        </div>
        <div class="modal-footer">
          <button id="agreed" type="button" class="btn btn-default" data-dismiss="modal">Agree</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<!-- jQuery and bootstrap js and css are required -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  if(!Cookies.get('hide-div')){
    setTimeout(function() {
      $('#myModal').modal();
    }, 1000);
  }

  $("#agreed").click(function () {
      Cookies.set('hide-div', true, { expires: 365 });
  });
});
</script>

Post Reply