Claro, aquí te proporciono un ejemplo completo utilizando HTML, CSS y JavaScript para crear el botón con las especificaciones que mencionaste:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Botón ID Uno</title>
<style>
/* Estilo del botón */
#uno {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
cursor: pointer;
}
/* Estilo de la ventana modal */
#modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
/* Estilo del contenido de la ventana modal */
#modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 800px;
}
/* Estilo de los enlaces ocultos */
.hidden-link {
display: none;
}
/* Estilo del mensaje de enlace desencriptado */
#link-message {
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- Botón -->
<button id="uno">Botón ID Uno</button>
<a href="#" class="hidden-link" data-link="aHR0cHM6Ly93d3cueW91dHViZS5jb20="></a>
<!-- Ventana modal -->
<div id="modal">
<div id="modal-content">
<div><a href="#" class="link">Enlace 1</a></div>
<div><a href="#" class="link">Enlace 2</a></div>
<div><a href="#" class="link">Enlace 3</a></div>
<div id="link-message"></div>
</div>
</div>
<!-- Script -->
<script>
// Botón
var button = document.getElementById('uno');
var hiddenLink = document.getElementsByClassName('hidden-link')[0];
var link = window.atob(hiddenLink.dataset.link);
// Ventana modal
var modal = document.getElementById('modal');
var modalContent = document.getElementById('modal-content');
var linkMessage = document.getElementById('link-message');
var links = modalContent.getElementsByTagName('a');
var linksShown = false;
var linksOpened = 0;
// Enlace oculto
hiddenLink.href = link;
hiddenLink.target = '_blank';
// Función para desencriptar la URL en base64
function decodeURL(url) {
return decodeURIComponent(atob(url).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
// Función para mostrar los enlaces
function showLinks() {
for (var i = 0; i < links.length; i++) {
links
.style.display = 'block';
links.addEventListener('click', function() {
linksOpened++;
if (linksOpened === links.length) {
linkMessage.textContent = 'El enlace desencriptado es: ' + link;
linkMessage.style.display = 'block';
}
});
}
linksShown = true;
}
// Abrir ventana modal al hacer clic en el botón
button.addEventListener('click', function() {
modal.style.display = 'block';
if (!linksShown) {
showLinks();
}
});
// Ocultar enlace y abrir ventana modal
setTimeout(function() {
hiddenLink.click();
}, 0);
</script>
</body>
</html>
```
Explicación:
En el código HTML, se crea un botón con ID 'uno', un enlace oculto con la URL encriptada en base64, y una ventana modal con tres divisiones. Cada división contiene un enlace normal que se mostrará después de hacer clic en el botón, y se utilizará para abrir un enlace en una pestaña. Además, hay un mensaje de enlace desencriptado que se mostrará después de abrir todos los enlaces.
En el CSS, se establecen los estilos para el botón, la ventana modal, los enlaces ocultos y el mensaje de enlace desencriptado.
En el JavaScript, se crea un botón, se recupera el enlace oculto y se desencripta la URL en base64. Luego, se crea el componente de ventana modal y se añade el enlace oculto al botón. Se crea una función para desencriptar la URL y otra función para mostrar los enlaces dentro de la ventana modal después de hacer clic en el botón.
Cuando se hace clic en el botón, se muestra la ventana modal y se comprueba si los enlaces han sido mostrados. Si los enlaces no han sido mostrados, se muestran y se oculta el enlace oculto haciendo clic en él automáticamente. Luego, se añade un escuchador de eventos a cada enlace que, cuando se hace