Create a Popup Window in Website using CSS

Sarmad Gardezi

Use theHTML<form>tagadd aformfor user input. Then,createyour <input> fields for yourform. Give a class to yourform to add a style for it, and id for connecting to the script. We are only using CSS file to make the script that make a popup screen.

In “When to showPopUp” block choose “Clickon certain link /button/ other element” radiobutton. Copy the shortcode from the first field of this option. Go to your post or page and select required text.Clickoncreatelinkbuttonin text editor and paste shortcode ofpopup.

So below is the code that make a popup screen using Css files.

HTML Code

 <h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">&times;</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>

CSS Code

body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}

h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}

.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}

.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}

.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}

@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}

If you still have any issue you can use Contact Page to intract with me.

More great articles

Create a Conditional Sparkline that Changes Color based on Data

The Sparkline function is one of my favorite functions in Google Sheets, so I'm excited to share this tip. Create…

Read Story

Facebook live Chat Widget for Websites & Blogs

Everyone now a days uses Facebook for different purposes like brand pages some personal blog pages , some company pages with…

Read Story

How to Disable Jetpack image Sitemaps from WordPress

Sitemaps are files that list each post and page that should be indexed by search engines like Google or Bing.…

Read Story
Arrow-up