Run this function from a button

Question

As you can see in the example below, when the links are clicked a div appears and when you click the button come back from the browser, it is hidden. I would like that when clicking the "close" button, inside the open page, I can also hide it. I need to reproduce the same system that happens when using the come back browser, because with a simple hide function ($('div').hide();) ends up bugging that system, I mean, to work around the browser button. Can you help me?

link in codepen: https://codepen.io/thiago-the-styleful/pen/BvoQRX

$(document).ready(function() {
  
  $("#paginaUm").click(function(event){
    $('.pagina.um').fadeIn();
  });
  
  $("#paginaDois").click(function(event){
    $('.pagina.dois').fadeIn();
  });
  
});

window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'paginaUm') {
    $('.pagina.um').fadeOut();
    e.preventDefault();
    return false;
  }
   if (oldURL == 'paginaDois') {
    $('.pagina.dois').fadeOut();
    e.preventDefault();
    return false;
  }

  //console.log('old:'+oldURL+' new:'+newURL);
}

  
  body {
    background-image: url(https://unsplash.it/1000/1010);
    background-size:cover;
    height:100%;
  }

.pagina{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:gray; color:white; padding:20px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#paginaUm" id="paginaUm">Pagina 1</a>
  <div class="pagina um">
  <h1>Popup 1</h1>
  <button class="fechar">fechar.</button>
</div>

<a href="#paginaDois" id="paginaDois">Pagina 2</a>
  <div class="pagina dois">
  <h1>Popup 2</h1>
  <button class="fechar">fechar</button>
</div>

Answer 1

You can use the method window.history.back(); that will trigger the same event onhashchange. Create Event Handler for the button .fechar:

$(".fechar").click(function(event){
   window.history.back();
});

How this will restore the URL in the browser’s address bar.

If you make a simple $('.pagina').fadeOut();, the hash at the address of browser will not change.

I’ll put the example to illustrate, but as here in the sandbox you can not see the URL changes, I will put them in the console.log:

$(document).ready(function() {
  
   $(".fechar").click(function(event){
      window.history.back();
   });
  
  $("#paginaUm").click(function(event){
    $('.pagina.um').fadeIn();
  });
  
  $("#paginaDois").click(function(event){
    $('.pagina.dois').fadeIn();
  });
  
});

window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'paginaUm') {
    $('.pagina.um').fadeOut();
    console.log(location.href);
    e.preventDefault();
    return false;
  }
   if (oldURL == 'paginaDois') {
    $('.pagina.dois').fadeOut();
    console.log(location.href);
    e.preventDefault();
    return false;
  }

  console.log(location.href);
}

body {
    background-image: url(https://unsplash.it/1000/1010);
    background-size:cover;
    height:100%;
  }

.pagina{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:gray; color:white; padding:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#paginaUm" id="paginaUm">Pagina 1</a>
  <div class="pagina um">
  <h1>Popup 1</h1>
  <button class="fechar">fechar.</button>
</div>

<a href="#paginaDois" id="paginaDois">Pagina 2</a>
  <div class="pagina dois">
  <h1>Popup 2</h1>
  <button class="fechar">fechar</button>
</div>

Answer 2

You just need to create an event on the close button, and as you are using the "page" class in the content you want to close, then use the "fadeOut" method to give the same effect as when it was opened.

$(".fechar").click(function(event){
    $('.pagina').fadeOut();
});

See the example using your code:

$(document).ready(function() {
  
  $("#paginaUm").click(function(event){
    $('.pagina.um').fadeIn();
  });
  
  $("#paginaDois").click(function(event){
    $('.pagina.dois').fadeIn();
  });
  
  $(".fechar").click(function(event){
    $('.pagina').fadeOut();
  });
  
});

window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'paginaUm') {
    $('.pagina.um').fadeOut();
    e.preventDefault();
    return false;
  }
   if (oldURL == 'paginaDois') {
    $('.pagina.dois').fadeOut();
    e.preventDefault();
    return false;
  }

  //console.log('old:'+oldURL+' new:'+newURL);
}

body {
    background-image: url(https://unsplash.it/1000/1010);
    background-size:cover;
    height:100%;
  }

.pagina{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:gray; color:white; padding:20px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#paginaUm" id="paginaUm">Pagina 1</a>
  <div class="pagina um">
  <h1>Popup 1</h1>
  <button class="fechar">fechar.</button>
</div>

<a href="#paginaDois" id="paginaDois">Pagina 2</a>
  <div class="pagina dois">
  <h1>Popup 2</h1>
  <button class="fechar">fechar</button>
</div>