EninSoft - recursos para programadores web > Eninsoft > desarrollo > Mostrar un popup al cargar una página con Jquery / Bootstrap.

Mostrar un popup al cargar una página con Jquery / Bootstrap.

marzo 16, 2020
Categoría: desarrollo php

No hay comentarios

Importante: Esta información es para uso lúdico personal. En ningún caso se pretende dar conocimientos, consejos, formaciones, herramientas, ni soluciones técnicas de ámbito comercial ni profesional. Simplemente es información que se ha redactado en finalidad de recordatorio de ciertos proyectos realizados. Si usted no está seguro de la fiabilidad de la información, no cumple con sus expectativas o no es de su agrado, le ruego que abandone este sitio web. Para ver todas las exclusiones garantía y de responsabilidad acceda a la sección Aviso Legal.

Dependencias: Jquery / Bootstrap.

Muestra un popup la primera vez que se entra en la página web. Posteriormente crear una variable de sessión que impide que se vuelva a mostrar.

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
    <title>Ejemplo de popup</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
  <?php if (!isset($_SESSION['hidden_popup'])){ ?>
  <script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
    </script>
    <?php } ?>
</head>
<body>
    WEBSITE CONTENT
</body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Notificación:</h4>
            </div>
            <div class="modal-body">
                <p>La dirección de DEMO, siguiendo las indicaciones de las Autoridades Sanitarias, ha decidido cerrar nuestras instalaciones hasta nuevo aviso. Pueden contactar con nosotros en el correo: demo@demo.com</p>
            </div>
        </div>
    </div>
</div>
</html>
<?php
$_SESSION['hidden_popup'] = true;
?>