Autor Tema: Crear ventana modal con HTML & CSS (Leído 4895 veces)

R3LI4NT · « **en:** Octubre 24, 2021, 03:39:39 am »

Un ventana modal es una capa que se muestra por encima del contenido visual de una página web generalmente activado por una acción como un click o temporizador. Muestra un contenido con una o varias opciones a elegir por el usuario.

1-

HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ventana Modal</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="container-modal">
        <div class="modal-btn">
            <button><a href="#mostrar-modal">Mostrar Ventana</a></button>
        </div>
    </div>
 
    <div id="mostrar-modal" class="ventana-modal">
        <div>
            <a href="#" class="cerrar"><i class='bx bx-x-circle'></i></a>
            <h1>My name is...</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque, fugiat facere soluta itaque voluptates nam! A voluptas repellendus adipisci cupiditate</p>
            <button class="info-btn"><a href="#">Más info</a></button>
        </div>
    </div>
</body>
</html>
 

CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Sansita:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];400&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    background-color: #fff;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
}
 
.container-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
button {
    background: #121212;
    padding: 10px 17px;
    border: 2px solid #00AEF0;
    outline: none;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.6);
}
 
button a {
    text-decoration: none;
    color: #fff;
    font-family: 'Sansita', sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
 
.ventana-modal {
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s;
}
 
.ventana-modal:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
 
.ventana-modal > div {
    width: 500px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 2rem;
    background: #121212;
    color: #f2f2f2;
    border-radius: 2rem;
    box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
 
.ventana-modal h1 {
    font-size: 2em;
    margin: 0 0 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}
 
.ventana-modal p {
    font-family: 'Poppins', sans-serif;
    font-weight: 3000;
    font-size: 13px;
    text-align: justify;
}
 
.cerrar {
    color: #ccc;
    line-height: 50px;
    font-size: 80%;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    cursor: pointer;
    transition: 0.2s;
}
 
i {
    font-size: 20px;
    margin-left: 20px;
    margin-top: 20px;
}
 
.cerrar:hover {
    color: #E32525;
}
 
.info-btn {
    margin: 30px 0;
    border-radius: 20px;
}
 
.info-btn a {
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #EFEFEF;
    transition: 0.2s;
}
 
.info-btn a:hover {
    color: #00AEF0;
}
 

2-

HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ventana Modal</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="container-modal">
        <div class="modal-btn">
            <button><a href="#mostrar-modal">Mostrar Ventana</a></button>
        </div>
    </div>
 
    <div id="mostrar-modal" class="ventana-modal">
        <div>
            <a href="#" class="cerrar"><i class='bx bx-x'></i></a>
            <i class='bx bx-envelope'></i><h1>Recibe todas las novedades por mail</h1>
            <input type="text" placeholder="Email..." class="email-input">
            <textarea placeholder="Escribe aquí tus comentarios" id="" cols="40" rows="4"></textarea>
            <button class="sub-btn"><a href="#">Suscribirse</a></button>
        </div>
    </div>
</body>
</html>
 

CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Sansita:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];400&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    background-color: #fff;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
}
 
.container-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.modal-btn button {
    background: #121212;
    padding: 10px 17px;
    border: 2px solid #00AEF0;
    outline: none;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.6);
}
 
button a {
    text-decoration: none;
    color: #fff;
    font-family: 'Sansita', sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
 
.ventana-modal {
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s;
}
 
.ventana-modal:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
 
.ventana-modal > div {
    width: 500px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 10px;
    background: #0984e3;
    color: #f2f2f2;
    border-radius: 8px;
    border: 3px solid rgba(54,54,54);
    box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
 
.ventana-modal h1 {
    font-size: 1.6rem;
    margin: 15px 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    padding: 0 10px;
    color: #f2f2f2;
}
 
.bx-envelope {
    font-size: 40px;
    position: absolute;
    color: #fff;
    margin-left: 10px;
    top: 20px;
}
 
.cerrar {
    color: #ccc;
    line-height: 50px;
    font-size: 80%;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    cursor: pointer;
    transition: 0.2s;
}
 
.bx-x {
    left: 30px;
    bottom: -15px;
    position: absolute;
    font-size: 40px;
    margin-left: 20px;
    margin-top: 20px;
    background: #D74C6B;
    border-radius: 50%;
    color: #fff;
    border: 2px solid rgba(54,54,54);
}
 
.email-input {
    position: relative;
    top: 20px;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 45px;
    outline: none;
    height: 30px;
    padding: 0 6px;
    font-family: 'Poppins', sans-serif;
    border: 1px solid rgba(0,0,0,.8);
}
 
textarea {
    position: relative;
    top: 30px;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 45px;
    outline: none;
    padding: 0 6px;
    font-family: 'Poppins', sans-serif;
    border: 1px solid rgba(0,0,0,.8);
}
 
 
.sub-btn {
    margin: 60px 163px;
    border-radius: none;
    background: #0668B3;
    border: 2px solid rgba(0,0,0,.8);
    padding: 10px 20px;
}
 
.sub-btn a {
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #EFEFEF;
    transition: 0.2s;
}
 

#R3LI4NT

Arcano666 · « **Respuesta #1 en:** Enero 13, 2022, 03:45:52 pm »

Muchas gracias, me ha resultado muy útil para mi web personal

Miguelzangorano · « **Respuesta #2 en:** Enero 21, 2022, 09:15:55 pm »

Está genial una ventana así tipo pop up, hace un tiempo para esta web va sobre frases... sobre amor y cosas así: https://frasesbonitas.wiki/frases-amor/ hice uno igual, y me llevó super poquito tiempo, así nos ahorramos de plugins y tener que cargar mucho más una web.

Miguelzangorano · « **Respuesta #3 en:** Enero 21, 2022, 09:16:48 pm »

Hace un tiempo creo que lo quitaron aun así intentaré verlo... era de color azul y negro.

Seguridad en gadgets tecnológicos: todo lo que necesitas saber para protegerte

Autor Tema: Crear ventana modal con HTML & CSS (Leído 4895 veces)

R3LI4NT

Crear ventana modal con HTML & CSS

Arcano666

Re:Crear ventana modal con HTML & CSS

Miguelzangorano

Re:Crear ventana modal con HTML & CSS

Miguelzangorano

Re:Crear ventana modal con HTML & CSS