Latest Posts
InfoTechSite
Web Designing Tutorials

How To Create PopUp Window Using CSS

Google+ Pinterest LinkedIn Tumblr
In the previous post I have explained about creating popup box using CSS, where a div is designed as a box with close button. In this post you are going to learn about creating popup window with title bar using CSS. Here is an example for displaying popup window while loading a webpage which will be closed after certain time or can be closed using close button. It may be very useful for displaying ads, offers or signup box for collecting emails.

Writing CSS Codes for Creating Popup Window

To create popup window using CSS, you have write codes to design window layout at first as given below. Where the window displays on 40% left and top having width 350px and height 250px, you can change the values as your requirement.

#window{
position:absolute;
left:40%;
top:40%;
width:350px; height:250px;
border:3px outset gray;
}

Following are the CSS codes for designing titlebar and close button, where titlebar includes title of the window and close button closes the popup window while clicking on it.

#titlebar{
position:absolute;
top:0px; height:18px;
width:340px; background-color:#aaa;
border-bottom:groove gray 2px;
padding:3px 5px 2px 5px;
font:bold 11pt sans-serif;
}
#close{
background-color:red;
color:white;
float:right;
cursor:default;
}  

Here are codes to design the area for creating content, which allows to add any text or JavaScript content to display in a window.

#content{
position: absolute;
top:25px; height:165px;
width:290px; padding:5px;
overflow:auto;
background-color:#fff;
}

Writing HTML Codes for Creating Popup Window

Following are the HTML codes to display popup box in your web page. You have to add any text or JavaScript content within div tag having id “content” to display in a window.

<div id=”window”>
<div class=”titlebar”>Title of Window
<span id=”close”>X</span></div>
<div id=”content”>
//Add your content here
</div></div>

Writing JavaScript Codes for Creating Popup Window

To close this popup window automatically after certain time or to close manually using close button, you have to write the following JavaScript codes. The following JavaScript codes closes popup window while clicking on close button or closed automatically after 9 seconds.

<script>
var c=document.getElementById(“close”);
var d=document.getElementById(“window”);
function close(){d.style.display=”none”;}
t=setTimeout(“close()”,9000);
c.onclick=function(){d.style.display=”none”;};
</script>

Full HTML, CSS and JavaScript Code for Creating Popup Window

Here are the full HTML, CSS and JavaScript codes for creating popup window.

<style>
#window{
position:absolute;
left:40%;
top:40%;
width:350px; height:250px;
border:3px outset gray;
}
#titlebar{
position:absolute;
top:0px; height:18px;
width:340px; background-color:#aaa;
border-bottom:groove gray 2px;
padding:3px 5px 2px 5px;
font:bold 11pt sans-serif;
}
#content{
position: absolute;
top:25px; height:165px;
width:290px; padding:5px;
overflow:auto;
background-color:#fff;
}
#close{
background-color:red;
color:white;
float:right;
cursor:default;}
</style>
<div id=”window”>
<div id=”titlebar”>Test Window<span id=”close”>X</span></div>
<div id=”content”>
//Add your content here
</div></div>
<script>
var c=document.getElementById(“close”);
var d=document.getElementById(“window”);
function close(){d.style.display=”none”;}
t=setTimeout(“close()”,3000);
c.onclick=function(){d.style.display=”none”;};
</script>

Preview:

Here is a preview of the above codes to display popup window which will be closed after 30 seconds automatically or can be closed using close button.

#window{
position:relative;
left:20%;
width:310px; height:215px;
border:2px outset gray;
}
#titlebar{
position:absolute;
top:0px; height:18px;
width:300px; background-color:#aaa;
border-bottom:groove gray 2px;
padding:3px 5px 2px 5px;
font:bold 11pt sans-serif;
}
#content{
position: absolute;
top:25px; height:180px;
width:300px; padding:5px;
overflow:auto;
background-color:#fff;
}
#close{
background-color:red;
color:white;
float:right;
cursor:default;}

Test WindowX

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

var c=document.getElementById(“close”);
var d=document.getElementById(“window”);
function close(){d.style.display=”none”;}
t=setTimeout(“close()”,30000);
c.onclick=function(){d.style.display=”none”;};

Read Next:How To Create Multiple Windows Using CSS

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Related Posts

Write A Comment