Window content
Second Window
Third window starts closed
Windows Template
Minimize the windows to the taskbar, make them full screen or close them.
Drag the title bar to move the windows or resize them from the bottom right corner.
You can download and edit this template freely as long as you leave a visible link to HTML5-Templates.com
' + $(this).attr("data-title") + 'x
');
});
$("#minimPanel" + (i-1)).addClass('activeTab');
$("#window" + (i-1)).addClass('activeWindow');
$( ".wincontent" ).resizable(); // resizable
$( ".window" ).draggable({ cancel: ".wincontent" }); // draggable
$(".window").mousedown(function(){ // active window on top (z-index 1000)
makeWindowActive($(this).attr("data-id"));
});
$(".winclose").click(function(){ // close window
closeWindwow($(this).parent().parent().attr("data-id"));
});
$(".winminimize").click(function(){ // minimize window
minimizeWindow($(this).parent().parent().attr("data-id"));
});
$(".taskbarPanel").click(function(){ // taskbar click
id = $(this).attr("data-id");
if ($(this).hasClass("activeTab")) { // minimize if active
minimizeWindow($(this).attr("data-id"));
} else {
if ($(this).hasClass("minimizedTab")) { // open if minimized
openMinimized(id);
} else { // activate if inactive
makeWindowActive(id);
}
}
});
$(".openWindow").click(function(){ // open closed window
openWindow($(this).attr("data-id"));
});
$(".winmaximize").click(function(){
if ($(this).parent().parent().hasClass('fullSizeWindow')) { // minimize
$(this).parent().parent().removeClass('fullSizeWindow');
$(this).parent().parent().children(".wincontent").height(minimizedHeight[$(this).parent().parent().attr("data-id")]);
$(this).parent().parent().children(".wincontent").width(minimizedWidth[$(this).parent().parent().attr("data-id")]);
} else { // maximize
$(this).parent().parent().addClass('fullSizeWindow');
minimizedHeight[$(this).parent().parent().attr('data-id')] = $(this).parent().parent().children(".wincontent").height();
minimizedWidth[$(this).parent().parent().attr('data-id')] = $(this).parent().parent().children(".wincontent").width();
adjustFullScreenSize();
}
});
adjustFullScreenSize();
});
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
h1 {font-size: 1.5em;margin-bottom: 10px;}
p{font-size: 1em;line-height: 1.3em;margin-bottom: 10px;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
#desktop {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
height: 100%;
width: 100%;
background: #CCC;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.window {
position: absolute;
border: 2px solid #000;
background: #EEE;
border-radius: 5px;
z-index: 1000;
}
.window.closed {
display: none;
}
.window.minimizedWindow {
display: none;
}
.window.fullSizeWindow {
top: 0 !important;
right: 0 !important;
left: 0 !important;
border-radius: 0;
bottom: 32px !important;
}
.fullSizeWindow .ui-resizable-handle {
display: none;
}
.windowHeader {
background-color: #b7b7e0;
text-align: right;
border-bottom: 2px solid #000;
padding: 2px;
cursor: move;
height: 28px;
}
.activeWindow .windowHeader {
background-color: #8888d6;
}
.windowHeader > span {
display: inline-block;
cursor: pointer;
border: 2px solid #000;
margin-left: 4px;
font-size: 19px;
padding: 2px 10px;
font-family: "Arial Black", Gadget, sans-serif;
border-radius: 5px;
line-height: 20px;
width: 12px;
height: 20px;
position: relative;
overflow: hidden;
}
.windowHeader > span:hover {
background: rgba(255,255,255,0.3);
}
.windowHeader > span.winclose:hover {
background: #f15454;
}
.windowHeader > span > span {
display: inline-block;
height: 8px;
width: 10px;
position: absolute;
top: 6px;
left: 10px;
}
.winminimize > span {
border-bottom: 3px solid #000;
}
.winmaximize > span {
border: 2px solid #000;
border-top: 3px solid #000;
}
.winmaximize > span:nth-child(2) {
display: none;
}
.fullSizeWindow .winmaximize > span:nth-child(1) {
margin: 2px 0 0 -4px;
}
.fullSizeWindow .winmaximize > span:nth-child(2) {
display: inline-block;
top: 3px;
left: 12px;
}
.wincontent {
padding: 10px;
min-width: 200px;
min-height: 140px;
border: 2px solid #000;
margin: 2px;
border-radius: 0 0 5px 5px;
}
.windowHeader > strong {
float: left;
margin: 0px 3px 0 10px;
line-height: 29px;
font-size: 17px;
}
.taskbarPanel {
display: inline-block;
border: 2px solid #000;
border-radius: 5px;
line-height: 24px;
margin: 2px 0 0 10px;
font-size: 17px;
padding: 0 10px;
background: #CCC;
font-weight: bold;
cursor: pointer;
}
.taskbarPanel.activeTab {
background: #FFF;
}
.taskbarPanel.minimizedTab {
background: #AAA;
}
.taskbarPanel.minimizedTab:hover {
background: #DDD;
}
.taskbarPanel.closed {
display: none;
}
#taskbar {
position: absolute;
height: 32px;
border-top: 2px solid #000;
bottom: 0;
left: 0;
right: 0;
background: #EEE;
}
#icons {
position: absolute;
z-index: 10;
top: 20px;
left: 20px;
}
#icons a {
display: block;
cursor: pointer;
padding: 2px 10px;
}
#icons a:hover {
background: #000;
color: #FFF;
}
#templateLink {
position: absolute;
display: inline-block;
bottom: 10px;
right: 20px;
font-weight: bold;
font-size: 15px;
color: #30478c;
}
/*Demo styles BEGIN*/
#window0 { top: 20px; left: 240px;}
#window1 { top: 400px; left: 120px;}
#window2 { top: 250px; left: 300px;}
#window3 { top: 125px; left: 420px;}
#window0 .wincontent { width: 660px; height: 400px; }
#window1 .wincontent { width: 500px; height: 300px; }
#window2 .wincontent { width: 400px; height: 350px; }
#window3 .wincontent { width: 400px; height: 350px; }
@media screen and (max-width:960px){
#window0 { left: 10px; }
#window3 { left: 50px; }
}
@media screen and (max-width:770px){
#window0 .wincontent { width: 460px; }
#window2 { left: 100px; }
#window1 { top: 190px; left: -5px; }
}
@media screen and (max-width:540px){
#window0 .wincontent { width: 230px; height: 200px; }
#window3 .wincontent {
width: 275px;
height: auto;
}
#window3 { top: 9px; left: 10px; }
#window2 { left: -118px; }
#window1 .wincontent { width: auto; height: 300px; }
}