Button to load page

Question

I have a page with adult content and would like to put two buttons, one to enter and one to leave. How could I do this in Javascript?

The entire screen would be dark, with a button that would release the content, and the other that would redirect the user to the home page.

Answer 1

Show/Hide block in Javascript

If the content is inside a div, then...

We will use a CSS style sheet to define the visibility of div

<style>
#oculto{
    display: none;  
}
</style>

The block we use to hide

 <div id="oculto">
     Seu conteúdo a ser ocultado
 </div>

The button to show/hide the div

<button onclick="mostrar();">Botão</button>

Javascript script that will hide/show the div

  <script>
    var visivel = false;

    function mostrar(){
    var objDiv = document.getElementById('oculto');     
       if (visivel == false){
          objDiv.style.display = "block"; 
          visivel = true;             
       }else{
          objDiv.style.display = "none";
          visivel = false;         
    }
    }
    </script>

    <style>
    #oculto{
    	display: none;	
    }
    </style>

   

     <div id="oculto">
        	Conteúdo
        </div>


    <button onclick="mostrar();">Mostar/ocultar</button>

  

      <script>
        var visivel = false;
        
        function mostrar(){
        var objDiv = document.getElementById('oculto');     
           if (visivel == false){
              objDiv.style.display = "block"; 
              visivel = true;             
           }else{
              objDiv.style.display = "none";
              visivel = false;         
        }
        }
        </script>

What this script does is the following:

1. Declares a'visible 'variable and sets the value 'false' beforehand'.
2. Declares the'objDiv 'variable which is the element we will hide.
3. Make a condition so that if visible is false, you must show objDiv and reassign a value to variable, in this case an opposite value. And if visible is true, it does not show objDiv and also reassigns a value contrary to the current variable.

In your case, as you want to darken the screen and things like that, you should style with CSS.

Read more about CSS here
Read more about conditional here