How To Create PopUp Window Using CSS

Writing CSS Codes for Creating Popup Window

#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;
}
#close{
background-color:red;
color:white;
float:right;
cursor:default;
}  

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

Writing HTML Codes for Creating Popup 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

<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

<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:

Read Next:How To Create Multiple Windows Using CSS