0

Bom dia.

Estou atuando num sistema feito em Angular 8, onde, quando entramos na home, aparece um modal de bem-vindo. Por enquanto, esse modal continua aparecendo sempre que voltamos para home.

Gostaria que essa modal aparecesse só na primeira vez que o usuário entrar no sistema. A partir da segunda vez, não mostrar novamente.

Esse é o HTML que eu tenho


    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="open-modal">
                    <p class="m-0"> Bem-vindo (a) </p>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-8 p-4 text-justify" id="textWelcome">
                        </div>
                        <div class="col-md-4 p-4 pt-4 pb-4" style="background-color: #f8f9fc;">
                            <div class="logo-text align-self-center pt-4">
                                <span class="spanLogo-bemvindo">
                                    <h1 style="letter-spacing: 0.1em;"><strong>Portal</strong></h1>
                                </span>
                                <p class="text-center small" style="margin-top: -17px; margin-bottom: 30px;">
                                    de Aprovações de Horas
                                </p>
                            </div>
                            <div class="row align-items-center">
                                <div class="col mx-auto text-center">
                                    <img class="img-responsive" src="./assets/img/logo.png" alt="Logo"
                                        width="140" height=auto>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-md-1">
                    <input class="form-check-inline" id="ckEuli" type="checkbox">
                </div>
                <div class="col-md-8 m-0 p-0 small">
                    LI E ESTOU CIENTE
                </div>
                <div class="col-md-3 d-flex flex-row-reverse">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>
</div>

E esse meu component.ts

import { Component, HostListener } from '@angular/core';
import { Parametrization } from './model/parametrization.model';
import { environment } from 'src/environments/environment';
import { Chart } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

declare const $:any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    title = 'app';

    paramWelcome: Parametrization = new Parametrization();

    constructor() { }

    ngOnInit() {

        Chart.plugins.register(ChartDataLabels);

        $(document).ready(function () {
            $("#open-modal").modal();
        });

        this.api.get(environment.apiUrl, 'Parameterization/BEMVINDO').subscribe(
            (parametrization: Parametrization[]) => {
                document.getElementById('textWelcome').innerHTML = parametrization[0].description;
            }
        );
    }
//resto
}

Como eu posso guardar a modal no cache / localstorage / sessionstorage para não aparecer nas próximas vezes que os usuários acessarem o sistema?

2
  • Mas o sistema não tem uma etapa de login? Poderia controlar isto com ele.
    – LeAndrade
    Commented 9/04/2020 às 15:15
  • o Login vem depois desse modal Commented 9/04/2020 às 15:17

1 Resposta 1

0

Consegui resolver isso, guardando com sessionstorage.

 $(document).ready(function () {
      var exibirModal = true;

      // Verifica se o navegador possui suporte a Storage.
      // E verifica na variável de sessão se a modal já foi aberta.
      if (typeof (Storage) !== 'undefined' && sessionStorage.getItem('modalExibida') == 'true') {
        exibirModal = false;
      } else {
        exibirModal = true;
      }

      if (exibirModal) {
        $('#open-modal').modal('show');

        if (typeof (Storage) !== 'undefined') {
          sessionStorage.setItem('modalExibida', 'true');
        }
      }
    });

peguei essa resposta como referencia em outro post, aqui no stackoverflow Mostrar ou Ocultar modal com sessionStorage

1
  • Funcionou aí Bruno, pq se está utilizando sessionStorage toda vez que fechar a página e depois acessar o sistema ele vai abrir o modal novamente não?
    – LeAndrade
    Commented 9/04/2020 às 17:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .