Modal that opens only the first time

Asked

Viewed 1,524 times

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 see you have a way with cookies. It’s just that I’m pretty layabout with jquery and I couldn’t do it, someone can help me?

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>
<script src="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>
javascript jquery css html5

1 answer

3


You can use the localStorage, that functions as a cookie. Use Bootstrap’s native callback to create it:

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

When the modal opens will create a LS (localStorage) called modal with any value (placed true because the value doesn’t 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');
   }
})

Full 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 set a functional example here because the snippet does not accept LS.

  • dvd, thank you very much!!! It worked perfectly!!!

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.