I have content inside a div, and I want that when someone clicks a message, like pop-up or as a browser message with something like that, click on any side of the div container. I have no idea if this can be done.
Thank you.
I have content inside a div, and I want that when someone clicks a message, like pop-up or as a browser message with something like that, click on any side of the div container. I have no idea if this can be done.
Thank you.
Here I leave a simple code that allows you to show a pop-up by clicking on a <div> , for this you use HTML code to define the <div> , CSS for the creation of the pop-up and its container, and JavaScript to define the function.
// Cuando el usuario cliclea el <div>, el popup se abre
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}/* Contenedor del popup */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* pop-up actual */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Muestra del Pop-up*/
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Cambio para mostrar/ocultar el contenedor del pop-up */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Animación del pop-up */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}<center>
<br><br><br>
<div class="popup" onclick="myFunction()">¡Dame clic!
<span class="popuptext" id="myPopup">Texto del contenedor</span>
</div>
</center>I hope it serves you:)