Hola usuario de nuestro sitio web, encontramos la solución a tu pregunta, continúa leyendo y la encontrarás más abajo.
Ejemplo 1: cuadro emergente en html
DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>bodyfont-family: Arial, Helvetica, sans-serif;/* The Modal (background) */.modaldisplay: none;/* Hidden by default */position: fixed;/* Stay in place */z-index:1;/* Sit on top */padding-top:100px;/* Location of the box */left:0;top:0;width:100%;/* Full width */height:100%;/* Full height */overflow: auto;/* Enable scroll if needed */background-color:rgb(0,0,0);/* Fallback color */background-color:rgba(0,0,0,0.4);/* Black w/ opacity *//* Modal Content */.modal-contentbackground-color:#fefefe;margin: auto;padding:20px;border:1px solid #888;width:80%;/* The Close Button */.closecolor:#aaaaaa;float: right;font-size:28px;font-weight: bold;.close:hover,.close:focuscolor:#000;text-decoration: none;cursor: pointer;style>head><body><h2>Modal Exampleh2><buttonid="myBtn">Open Modalbutton><divid="myModal"class="modal"><divclass="modal-content"><spanclass="close">×span><p>Some text in the Modal..p>div>div><script>// Get the modalvar modal =document.getElementById("myModal");// Get the button that opens the modalvar btn =document.getElementById("myBtn");// Get the element that closes the modalvar span =document.getElementsByClassName("close")[0];// When the user clicks the button, open the modal
btn.onclick=function()
modal.style.display="block";// When the user clicks on (x), close the modal
span.onclick=function()
modal.style.display="none";// When the user clicks anywhere outside of the modal, close itwindow.onclick=function(event)if(event.target== modal)
modal.style.display="none";script>body>html>Ejemplo 2: código CSS emergente
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
body
background:#ddd;
font-family:"Raleway";
.center
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
.popup
width:350px;
height:280px;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:center;
opacity:0;
top:-200%;
transform:translate(-50%,-50%) scale(0.5);
transition: opacity 300ms ease-in-out,
top 1000ms ease-in-out,
transform 1000ms ease-in-out;
.popup.active
opacity:1;
top:50%;
transform:translate(-50%,-50%) scale(1);
transition: transform 300ms cubic-bezier(0.18,0.89,0.43,1.19);
.popup .icon
margin:5px 0px;
width:50px;
height:50px;
border:2px solid #34f234;
text-align:center;
display:inline-block;
border-radius:50%;
line-height:60px;
.popup .icon i.fa
font-size:30px;
color:#34f234;
.popup .title
margin:5px 0px;
font-size:30px;
font-weight:600;
.popup .description
color:#222;
font-size:15px;
padding:5px;
.popup .dismiss-btn
margin-top:15px;
.popup .dismiss-btn button
padding:10px 20px;
background:#111;
color:#f5f5f5;
border:2px solid #111;
font-size:16px;
font-weight:600;
outline:none;
border-radius:10px;
cursor:pointer;
transition: all 300ms ease-in-out;
.popup .dismiss-btn button:hover
color:#111;
background:#f5f5f5;
.popup > div
position:relative;
top:10px;
opacity:0;
.popup.active > div
top:0px;
opacity:1;
.popup.active .icon
transition: all 300ms ease-in-out 250ms;
.popup.active .title
transition: all 300ms ease-in-out 300ms;
.popup.active .description
transition: all 300ms ease-in-out 350ms;
.popup.active .dismiss-btn
transition: all 300ms ease-in-out 400ms;
Comentarios y calificaciones
Eres capaz de añadir valor a nuestro contenido informacional contribuyendo tu experiencia en las aclaraciones.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)