How To Create PopUp Window Using CSS

In the previous post I have explained about creating popup box using CSS, where a div is designed as a box with close button. Along with creating popup box you can also create popup window 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.

Table of Contents

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>