How To Create Multiple Windows Using CSS

In the previous post I have explained about creating popup window using CSS, where a div is designed as a window with close button. In this post you are going to learn about on “how to create multiple windows with opacity using CSS”. Here is an example for displaying multiple windows while loading a webpage which can be closed using close button.

Table of Contents

CSS Codes to Create Multiple Windows

To create popup window using CSS, you have write codes to design window layout at first as given below. This CSS code creates windows having width 350px and height 250px with border 3px outset gray, you can change the values as your requirement.

.window{
position:absolute;
width:350px; height:250px;
border:3px outset gray;
}

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

.titlebar{
position:absolute;
top:0px; height:18px;
width:348px; background-color:#aaa;
border-bottom:groove gray 2px;
padding:3px 1px 3px 1px;
font:bold 11pt sans-serif;
cursor:default;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
}
.close{
background-color:red;
padding:1px 5px 1px 5px;
color:white;
float:right;
}

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;
}

Following are the CSS codes for making windows translucent, which makes windows 75% opacity.

.translucent{
opacity:.75;
filter:alpha(opacity=75);}

HTML Codes to Create Multiple Windows

Following are the HTML codes to display multiple windows in your web page. You can add any text or JavaScript content within div tag having class “content” to display in windows.

<div class="window" style="left:50px;top:70px;z-index:10;">
<div class="titlebar">Test Window 1<span class="close">X</span></div>
<div class="content">
//Add your content here
</div></div>
<div class="window" style="left:80px;top:110px;z-index:20;">
<div class="titlebar">Test Window 2<span class="close">X</span></div>
<div class="content translucent">
//Add your content here
</div></div>
<div class="window" style="left:120px;top:150px;z-index:30;">
<div class="titlebar">Test Window 3<span class="close">X</span></div>
<div class="content translucent">
//Add your content here
</div></div>

JavaScript Codes to Create Multiple Windows

To close these multiple windows using close button, you have to write the following JavaScript codes. Following JavaScript codes closes windows while clicking on close button.

<script>
var win=document.getElementsByClassName("window");
var cls=document.getElementsByClassName("close");

cls[0].onclick=function(){win[0].style.display="none";};
cls[1].onclick=function(){win[1].style.display="none";};
cls[2].onclick=function(){win[2].style.display="none";};
</script>

Full HTML, CSS and JavaScript Code to Create Popup Window

Here are the full HTML, CSS and JavaScript codes for creating multiple windows with close button.

<style>
.window{
position:absolute;
width:350px; height:250px;
border:3px outset gray;
}
.titlebar{
position:absolute;
top:0px; height:18px;
width:348px; background-color:#aaa;
border-bottom:groove gray 2px;
padding:3px 1px 3px 1px;
font:bold 11pt sans-serif;
cursor:default;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
}
.content{
position: absolute;
top:25px; height:165px;
width:290px; padding:5px;
overflow:auto;
background-color:#fff;
}
.translucent{
opacity:.75;
filter:alpha(opacity=75);}
.close{
background-color:red;
padding:1px 5px 1px 5px;
color:white;
float:right;
}
</style>
<div class="window" style="left:50px;top:70px;z-index:10;">
<div class="titlebar">Test Window 1<span class="close">X</span></div>
<div class="content">
//Add your content here
</div></div>
<div class="window" style="left:80px;top:110px;z-index:20;">
<div class="titlebar">Test Window 2<span class="close">X</span></div>
<div class="content translucent">
//Add your content here
</div></div>
<div class="window" style="left:120px;top:150px;z-index:30;">
<div class="titlebar">Test Window 3<span class="close">X</span></div>
<div class="content translucent">
//Add your content here
</div></div>
<script>
var win=document.getElementsByClassName("window");
var cls=document.getElementsByClassName("close");

cls[0].onclick=function(){win[0].style.display="none";};
cls[1].onclick=function(){win[1].style.display="none";};
cls[2].onclick=function(){win[2].style.display="none";};
</script>