0

Gostaria de que quando alguém entrasse na minha página, abrisse uma box, mas não queria que fosse a padrão do navegador, mas sim uma escolhida a partir do meu CSS.

Isso seria possível?

Códigos:

.box {
  background: white;
  border-radius: 10px;
  padding: 20px;
  }
<div class="box"></div>


Eu queria também, que ao abrir a box, o fundo ficasse tipo mais escuro, em volta, e quando fechasse ficava a página normal...

8
  • Chamar no ready do document não serve? Commented 3/06/2015 às 18:38
  • Abrir onde? Você quer fazer um Modal? Commented 3/06/2015 às 18:43
  • Se ela vai aparecer sempre que a página for carregada porquê não deixa ela com visualização fixa e se preocupa apenas em adicionar um botão "Fechar" á mensagem? É mais prático. Commented 3/06/2015 às 18:45
  • Eu queria que toda vez que a pessoa entrasse na página aparecesse, e que tivesse um botão de fechar. Mas o botão de fechar eu já tenho, só queria para abrir toda vez que entrasse na página. Commented 3/06/2015 às 18:53
  • 1
    O que você quer é um modal, dê uma olhada nessa resposta que fiz em outra pergunta, ela atende sua dúvida: pt.stackoverflow.com/questions/65881/… Commented 3/06/2015 às 19:04

3 Respostas 3

1

Use a função onLoad do JS.

document.onload = function(){
    document.getElementById('box').style.display = 'block'; 
};


<div id="box"></div>

#box {
    background: #000;
    border-radius: 10px;
    padding: 20px;
    width:500px;
    height: 500px;
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
 }
1

Da uma olhada na biblioteca sweetalert. Depois que você instalar ela, basta chamar um swal (que é o método principal da biblioteca) quando o documento estiver pronto:

$(document).ready(function(){
    swal('Minha mensagem');
}):
0

Você pode usar Bootstrap, $.ready e $(...).modal('show');:

$(document).ready(function(){
     $('#myModal').modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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 .