Popup is the most common behavior for any website. Popup’s are using to provide any specific information or user flow like login, register etc. Popup’s are generally created using scripts or plugins like bootstrap.
Today we learn how to create popup with functionality with CSS only. We would not use any script for opening and closing behaviour of popup.
<li class="col-sm-3" >
<div class="slider-box">
<h6><a href="javascript:void(0);" class="view-more-blog"><label for="blog-chkid-1">Do YOUR BEST where ever you ARE</label></a></h6>
<div class="inner-content">
<p>This is my first blog and that too in a technology oriented community !! I cant believe it , because at college I was a girl who never wanted to be in IT profession...</p>
</div>
<div class="mrg10"><label class="blogsreadmore" for="blog-chkid-1">read more...</label></div>
</div>
<input type="checkbox" id="blog-chkid-1" class="popupinput" >
<div class="popup modalwrap modalWrapNew">
<div class="modalwrap-content wd60">
<label class="close" for="blog-chkid-1">x</label>
<h3>Do YOUR BEST where ever you ARE</h3>
<div class=" " id="view-more-id-1">
This is my first blog and that too in a technology oriented community !! I cant believe it , because at college I was a girl who never wanted to be in IT profession . But I am IT professional now with almost 13 years of technical experience in TPF assembler technology. Destiny takes or pushes us to places where we are capable of and make us able to handle it.My scenario is one of it, though not of interest I joined this profession I began to love it and give the 100 % on what ever comes my way, either its designing, coding, testing, mentoring, managing a team or taking initiatives.I really feel a sense of pride when I deliver a quality product to the customer or help someone crack a solution for technical or management issues. That's what make a difference in my professional life and that motivates me to move further and achieve more heights!!-- Helen </div>
</div>
<label class="outclickhide" for="blog-chkid-1"></label>
</div>
</li>
[the_ad_placement id=”after-content”]
CSS Code
<style type="text/css">
/********** Modal Pupup CSS **********/
.recent-bloglist{margin:3em 0;}
.blogsreadmore{cursor:pointer;}
.popupinput{display:none;}
.modalwrap{position:fixed; top:0; left:0; bottom:0; right:0; display:none;z-index: 9991; font-size:14px;}
input.popupinput[type="checkbox"]:checked + .modalwrap{ display:block;}
.modalwrap:after{content:"";position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8);}
.modalwrap .modalwrap-content{width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; z-index: 2; padding: 16px; border-radius: 6px; max-height: 80%; overflow: auto;}
label.outclickhide{position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;}
@media only screen and (max-width: 768px){
.modalwrap .modalwrap-content{width:80%}
}
@media only screen and (min-width: 767px){
.modalwrap .modalwrap-content.wd60{width:60%;}
.modalwrap .modalwrap-content.wd40{width:40%;}
.modalwrap .modalwrap-content.wd25{width:25%;}
}
</style>
Must read articles
How it works
In above example 4 things are main let’s discuss them in details and its working.
- modalwrap:- modalwrap class creates the black background block which block the screen and “modalwrap-content” provides the area where popup content will come.
- Hidden Input: checkbox Input give us the trigger and status when we popup will show and hide. We can target the checked status of radio and input type using CSS, therefore if checkbox is checked we enabled the popup check line no-7.
- Label attribute: We all know the for attribute and its behavior in label tag. It triggered the click event of input which id is mentioned in its for attribute.it help us to checked and unchecked the checkbox input.
- Tag Sequence: Main role in popup functionality is the sequence of tag and classes. Here we have use sibling CSS selector to enable hide & show. If the sequence of classes got changed your popup will not work any more.