<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf8">
<style>
/* Popup container - can be anything you want */
.popup { display:inline-block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.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;
}
/* Popup arrow */
.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;
}
/* Toggle this class - hide and show the popup */
.popup .show { visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} }
</style>
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction(this)"> - Haz clic aquí para ver un popup -
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<div class="popup" onclick="myFunction(this)"> Haz clic aquí para ver otro popup -
<span class="popuptext" id="myPopup">Un segundo Popup!</span>
</div>
</body>
<script>
// When the user clicks on div, open the popup
function myFunction(el) { el.firstElementChild.classList.toggle("show");}
</script>
Crear cuenta
Comentarios sobre la versión: 1 (1)