Buscar en la base de conocimientos
Mostrar un modal sin ninguna libreria externa
Aquí tienes un ejemplo simple de cómo puedes crear un botón que muestra un modal al hacer clic, sin utilizar Bootstrap. Este ejemplo utiliza HTML, CSS y JavaScript:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Modal sin Bootstrap</title> </head> <body> <button id="openModalBtn">Abrir Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close" id="closeModalBtn">×</span> <p>Contenido del modal...</p> </div> </div> <script src="script.js"></script> </body> </html>
body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f4f4f4; } .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.7); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
document.addEventListener('DOMContentLoaded', function () { var openModalBtn = document.getElementById('openModalBtn'); var closeModalBtn = document.getElementById('closeModalBtn'); var modal = document.getElementById('myModal'); openModalBtn.addEventListener('click', function () { modal.style.display = 'block'; }); closeModalBtn.addEventListener('click', function () { modal.style.display = 'none'; }); window.addEventListener('click', function (event) { if (event.target == modal) { modal.style.display = 'none'; } }); });
Este código crea un botón que, al hacer clic, muestra un modal simple con un botón para cerrar. Puedes personalizar el contenido del modal y los estilos según tus necesidades. Guarda el HTML en un archivo con extensión .html
, el CSS en un archivo con extensión .css
, y el JavaScript en un archivo con extensión .js
, luego ábrelo en un navegador para probarlo.