Close div with "x" [closed]

0

I would like to know how to do so that people can close a div that has an adsense ad by clicking on an "x"

Here's an image of what I'm looking for:

    
asked by MatiST00 08.09.2018 в 17:08
source

2 answers

2

You can add this code, it's simple so you can adapt it, it does not use jquery only pure Javascript css and html

var cerraranuncio = anuncio => {
  document.getElementById(anuncio).style.display = "none";
}
.anuncio {
  width: 400px;
  height: 100px;
  background: lightblue;
  display:block
}

.boton {
  float: right;
}
<div id="primeranuncio" class="anuncio">
  Anuncio
  <span class="boton" onclick="cerraranuncio('primeranuncio')">x</span>
</div>

Edit: You can add a timer so that from time to time the ad reappears, it may be useful to you

var cerraranuncio = anuncio => {
  document.getElementById(anuncio).style.display = "none";

  setTimeout(() => {
    document.getElementById(anuncio).style.display = "block";
  }, 4000) //cuatro segundos

}
.anuncio {
  width: 400px;
  height: 100px;
  background: lightblue;
  display: block;
}

.boton {
  float: right;
}
<div id="primeranuncio" class="anuncio">
  Anuncio
  <span class="boton" onclick="cerraranuncio('primeranuncio')">x</span>
</div>
    
answered by 08.09.2018 / 22:27
source
1

I think this is what you're looking for:

It's an example with a modal window:

<button class="abrir">Abrir modal</button>

<!-- HTML -->
<div id="ejemplo" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
  <span class="cerrar">&times;</span>
  <h1>Hola, esto es un Modal</h1>
  </div> <!-- fin modal content -->
</div> <!-- fin modal -->

The CSS For the example:

<style type="text/css">
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        border-radius: 10px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.8); 
    }

    .modal-content {
      border-radius: 10px;
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%; 
    }

    .cerrar {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .cerrar:hover,
    .cerrar:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>

Now, with this little jQuery event, you can open and close the Modal, as for your X , in the <span> you have to close it as you want.

<script>
$(document).ready(function(){

  $(document).on('click', '.abrir', function () {
    $('#ejemplo').show();
  });

  $(document).on('click', '.cerrar', function () {
    $('#ejemplo').hide();
  });
});
</script>

Without forgetting to add jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I think that based on this code, your question could be solved! Greetings

    
answered by 08.09.2018 в 17:19