Modal that opens only the first time [duplicate]

Navigation
2

I'm new here, I have a modal that opens automatically, I wanted to make it open only the first time for the user. I saw you have a way to do with cookies. 

insira o código aqui <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
/* The Modal (background) */.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p><p>Some other text...</p>
</div>
<div class="modal-footer">
  <h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
$('.close').click(function(event){
$('#myModal').fadeOut();
event.preventDefault();
});
$(document).ready(function() {
$('#myModal').modal('show');
})
</script>
</body>
</html>
    
asked by anonymous 28.06.2018 / 02:10

1 answer

3

You can use localStorage , which works as a cookie . Use Bootstrap's native callback to create it: 

$('#myModal').on('shown.bs.modal', function(){
   localStorage.setItem("modal", true);
});

When open modal will create a LS (localStorage) named modal with any value (I put true because the value does not matter in that case).

When loading the page you check if this LS exists, if it does not exist, the modal will open normally: 

$(document).ready(function() {
   var ls = localStorage.getItem("modal");
   if(!ls){
      $('#myModal').modal('show');
   }
})

Complete JS code: 

$('.close').click(function(event){
   $('#myModal').fadeOut();
   event.preventDefault();
});

$(document).ready(function() {
   var ls = localStorage.getItem("modal");
   if(!ls){
      $('#myModal').modal('show');
   }
})

$('#myModal').on('shown.bs.modal', function(){
   localStorage.setItem("modal", false);
});
  

I do not put a working example here because the snippet does not accept LS.

    
28.06.2018 / 02:37
React Native application using Firebase Ignore reading the first input