In this post we will teach you. (How to Create Popup in Html With CSS) .Copy the code below. Then check out our blog through the online HTML editor. Then use the code in your website. If there is a problem with the code, ask your question in the comment box below.
<![CDATA[
<input type="checkbox" id="toggle">
<label style="background-color:#891D1D;
"for="toggle">Open Popup</label>
<dialog >
<p>
Learn the complete HTML from https://htmlcssplace.blogspot.com/ there is available the complete learing tutorial
</p>
<label style="background-color:#891D1D;"for="toggle">close </label>
</dialog>
<style>
body{
font-family: monospace;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin:0;
padding: 0;
width: 100%;
}
#toggle{
visibility: hidden;
opacity: 0;
position: relative;
z-index: -1;
color:#891D1D;
}
#toggle:checked ~ dialog {
display: block;
color:#891D1D;
background-color:#FFE2B6;
border-radius: 25px;
}
label{
background: skyblue;
color: white;
padding: .5em 1em;
border-radius: 4px;
}
@keyframes appear {
0%{
opacity: 0;
transform: translateY(-10px);
}
}
dialog{
animation: appear 350ms ease-in 1;
max-width: 500px;
}
</style>
]]>
Copy All Code
Post a Comment
Post a Comment