a
X

Fale Conosco:

Aguarde, enviando contato!

Eversoft - Agência Digital

Ativando a Modal automaticamente no Bootstrap

Aprenda aqui a ativar o componente Modal do Bootstrap de forma automática em seu site ou sistema logo ao carregar a página.

Por Rafael Marques dia em Video Aulas

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Fala Dev!

Na video aula expressa de hoje, vamos aprender a carregar o componente Javascript MODAL no Bootstrap.

De uma forma bem simples podemos usar o Jquery para fazer a ativação da modal.

O próprio Bootstrap fornece meios para isso através da função .modal() sendo necessário apenas informar o ID da sua modal e passar o parâmetro 'show'.

<script>
$('#aviso').modal('show');
</script>

O script deve ser informado após a chamada do Jquery e do Bootstrap.js para que funcione corretamente.

Confira o exemplo completo abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Document</title>
</head>
<body>

<div class="modal fade" id="aviso">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h1>Aviso Importante</h1>
<p>Recadastre sua Senha</p>
</div>
</div>
</div>
</div>


<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 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>

<script>

var senha = 0;

if(senha != 1){
$('#aviso').modal('show');
}


</script>

</body>
</html>

Espero que tenham gostado ;)

Deixe deu comentário ou pedido e compartilhe para que mais pessoas possam aprender essa sacada.

Um forte Abraço!

 

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Deixe seu comentário aqui: