Execute this function from a button

Navigation
3

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

link in codepen: link 

$(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><ahref="#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>
    
asked by anonymous 12.12.2018 / 17:51

2 answers

4

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

$(".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 the   browser will not change.

I'm going to put the example to illustrate, but since here in the sandbox you can not see URL changes, I'll put them in 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><ahref="#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>
    
12.12.2018 / 18:21
3

You just need to create an event on the close button, and since you're using the "page" class in the content you want to close, then use the "fadeOut" method to give it 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><ahref="#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>
    
12.12.2018 / 17:56
Command to exit the scope of a function (equivalent to 'break') CSS selector for tables