Código Html (Modal Boostrap):
<!DOCTYPE html>
<html>
<head>
<title>Modal</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="modal" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Hola Bienvenido.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Este modal aparecerá sólo una vez</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Continuar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Modal</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="modal" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Hola Bienvenido.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Este modal aparecerá sólo una vez</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Continuar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
if (!localStorage['modal']) {
localStorage['modal'] = 'mostrado';
$("#modal").modal("show");
}
});
</script>
$(document).ready(function(){
if (!localStorage['modal']) {
localStorage['modal'] = 'mostrado';
$("#modal").modal("show");
}
});
</script>
Explicando el script:
Lo que hará el script es; al cargar la página verificará si existe el valor "modal" en la LocalStorage, sino existe mostrará el Pop Up, asà mismo agregará el mismo en caso de no existir, de esta manera la próxima vez que el usuario entre a nuestra página el Pop Up no se mostrará, ya que el valor "Modal" existirá en nuestra LocalStorage.
Nota: Agrega el script de manera que te convenga.
Visita mi canal de Youtube:
Youtube
Entra a mi grupo de Whatsapp:
var grupo = "Help Code";
0 Comentarios