Este equipo de redactores ha pasado mucho tiempo investigando la solución a tu duda, te compartimos la respuesta por eso nuestro objetivo es resultarte de gran apoyo.
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: formulario emergente en html
<divclass="popup center"><divclass="icon"><iclass="fa fa-check">i>div><divclass="title">
Success!!
div><divclass="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nihil provident voluptatem nulla placeat
div><divclass="dismiss-btn"><buttonid="dismiss-popup-btn">
Dismiss
button>div>div><divclass="center"><buttonid="open-popup-btn">
Open Popup
button>div>Aquí puedes ver las reseñas y valoraciones de los lectores
Acuérdate de que tienes permiso de valorar este tutorial si hallaste tu enigma en el momento clavado.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)