Home / Questions / 166859
Accepted
Jheyman Mejia
Asked: 2020-05-23 13:33:30 +0800 CST 2020-05-23 13:33:30 +0800 CST

Modal message only on desktop resolutions

  • 772

I have a web page where I want to display a modal message that lets the PC visitor know that the page works better on mobile.

How do I get this message to display only on those devices and not on smartphones ?

I've thought about bootstrap media queries and screen resolutions but I don't really know how to apply it to code.

I leave the window that opens automatically:

<?php
  # Iniciando la variable de control que permitirá mostrar o no el modal
  $exibirModal = false;
  # Verificando si existe o no la cookie
  if(!isset($_COOKIE["mostrarModal"]))
  {
    # Caso no exista la cookie entra aquí
    # Creamos la cookie con la duración que queramos
     
    //$expirar = 3600; // muestra cada 1 hora
    //$expirar = 10800; // muestra cada 3 horas
    //$expirar = 21600; //muestra cada 6 horas
    $expirar = 43200; //muestra cada 12 horas
    //$expirar = 86400;  // muestra cada 24 horas
    setcookie('mostrarModal', 'SI', (time() + $expirar)); // mostrará cada 12 horas.
    # Ahora nuestra variable de control pasará a tener el valor TRUE (Verdadero)
    $exibirModal = true;
  }
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Webpage para móviles</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
  <h2>Cuerpo de la página</h2>
    <!-- Modal -->
    <div class="modal fade" id="modalInicio" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
       <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Bienvenido a Página.com</h4>
         </div>
         <div class="modal-body">
           Nuestra web se ve mucho mejor desde un disposito móvil, puedes interactuar con ella en una forma única. Pruébalo ahora mismo!
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php if($exibirModal === true) : // Si nuestra variable de control "$exibirModal" es igual a TRUE activa nuestro modal y será visible a nuestro usuario. ?>
  <script>
  $(document).ready(function()
  {
    // id de nuestro modal
    $("#modalInicio").modal("show");
  });
  </script>
  <?php endif; ?>
</body>
</html>

Thank you!

javascript

1 Answers

  1. Best Answer

    Add the tag hidden-**depending on the resolution you don't want to show the modal.

    If for example you add hidden-xsthe modal it will be shown in all resolutions except those between the extra small values.

    Responsive utilities

    • 2