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"
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>
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">×</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