La Mejor solución
Freelance
Menu
Buscar en la base de conocimientos
< Todos los temas
Imprimir

Mostrar un modal sin ninguna libreria externa

Publicado

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">&times;</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.

Sidebar