Agregar un modal informativo | Centro de Ayuda Publica.la

Esto puede ser útil para informar a tus usuarios que los libros adquiridos son para consumo en tienda y no pueden descargarse o imprimirse, darles un mensaje de bienvenida o lo que necesites comunicar.

Te compartimos un ejemplo de uso de Editorial UPC:

1. Ve a Panel de control > Ajustes > Avanzados

2. Copia el siguiente código y pégalo preferentemente en un editor de código o en un block de notas:

<!-- Inicio Modal-Popup inform -->

<script type="text/javascript">

$(window).on("load", function () {
  if (!localStorage.getItem("modalShown") && window.location.pathname.includes('/library')) {
    $("#exampleModal").modal("show");
  }
  
  $(".btn-cerrar").click(function () {
    $("#exampleModal").modal("hide");
    localStorage.setItem("modalShown", 'true');
  });
});
</script>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
      <p>Bienvenido(a) a la tienda de .... <br/> Te recordamos que los ebooks que adquieras son para consumo en tienda y no pueden ser descargados en ningún dispositivo.<p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success btn-cerrar" data-bs-dismiss="modal">Aceptar</button>
      </div>
    </div>
  </div>
</div>
<style>
#exampleModal .modal-body p {
font-size: 20px;
}
</style>
<!-- Fin Modal-Popup inform -->

Reemplaza los textos colocando el mensaje que desees. Presta atención a las etiquetas del código ya que deben estar escritas correctamente para evitar errores.

3. Pega el código que editaste en la sección Custom before </body> code:

4. Guarda los cambios.

Tus usuarios verán este mensaje informativo por única vez, y al dar clic en el botón "Aceptar" esta información se almacenará en la memoria del navegador desde donde está ingresando (Google Chrome por ejemplo) para evitar que cada vez que ingrese se muestre el mensaje. Ten en cuenta que si borra la caché del navegador o ingresa desde uno diferente (Firefox por ejemplo), volverá a ver el mensaje.

⚠️Te recomendamos siempre tratar de crear una copia de seguridad del código que insertes en la tienda. Puedes utilizar herramientas gratuitas online, te compartimos un sitio de ejemplo codepen.io

Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].