Table of Contents
Writing CSS Codes for Creating Popup Window
#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
<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.
Comments are closed.