Message when entering the page

Asked

Viewed 137 times

0

I wish that when someone came onto my page, they’d open a box, but I didn’t want it to be the default browser, but rather one chosen from my CSS.

That would be possible?

Codes:

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

I also wanted that when I opened the box, the background would be kind of darker, around, and when I closed the normal page...

javascript

  • Calling in the ready of Document does not serve?

  • Open where? You want to do a Modal?

  • If she’s gonna show up at all times that the page is loaded because it does not leave it with fixed view and cares only to add a "Close" button to the message? It is more practical.

  • I wanted every time the person entered the page to appear, and to have a close button. But the close button I already have, I just wanted to open every time I entered the page.

  • 1

    What you want is a modal, take a look at this answer I made in another question, it answers your question: http://answall.com/questions/65881/como-fazer-um-pop-up-para-inserir-um-email-aparecer-ao-clicar-um-bot%C3%A3o/65887#65887

  • It did not solve, the modal is without style and when it tries to close, nothing happens. I have tried in bootstrap also.

  • Herman the bootstrap requires jquery, did you forget to add it?

  • I got the modal. but you have to click "Open Modal" to open. I wanted that when the person entered the page, automatically opened...

Show 3 more comments

3 answers

1

Use the JS onload function.

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

Take a look at the library sweetalert. After you install it, just call one swal (which is the library’s main method) when the document is ready:

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

0

You can use Bootstrap, $.ready and $(...).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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.