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 creating 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.

Writing CSS Codes for Creating 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);}

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

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

Preview:

Here is a preview of the above codes to display multiple windows which can be closed using close button.


Test Window 1X

Test Window 2X

Test Window 3X


Read Next:How To Create Mobile Friendly Menu Using CSS