<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ryanDVthomas/pen/dXmWXE?limit=all&page=5&q=mac" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">.section {
height: 100vh;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.section .content {
width: 400px;
text-align: center;
}
.section .content h1 {
font-family: ' Helvetica Neue', helvetica, arial, sans-serif;
margin: 0;
}
.section .content .openModal {
display: inline-block;
margin-top: 10px;
border: solid #029173 2px;
padding: 10px 20px;
border-radius: 10px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.section .content .openModal:hover {
color: white;
background: #03BF94;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.section.one {
background: #B0CFE5;
}
.mac-window {
border-radius: 5px;
overflow: hidden;
max-height: 90%;
min-width: 400px;
max-width: 80%;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.25);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%) scale(0);
transform: translateY(-50%) translateX(-50%) scale(0);
opacity: 0;
}
.mac-window.active {
-webkit-transform: translateY(-50%) translateX(-50%) scale(1);
transform: translateY(-50%) translateX(-50%) scale(1);
opacity: 1;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.mac-window.minimize {
top: 125%;
-webkit-transform: translateY(-50%) translateX(-50%) scale(1);
transform: translateY(-50%) translateX(-50%) scale(1);
opacity: 1;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.mac-window.minimize:hover {
top: 120%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.mac-window.maximize {
height: 100%;
max-height: 100%;
width: 100%;
max-width: 100%;
-webkit-transform: translateY(-50%) translateX(-50%) scale(1);
transform: translateY(-50%) translateX(-50%) scale(1);
}
.mac-window .title-bar {
background: #d0cfd0;
background: -webkit-linear-gradient(bottom, #c8c5c8, #eae7ea);
background: linear-gradient(to top, #c8c5c8, #eae7ea);
height: 20px;
border-bottom: 1px solid #b4b4b4;
width: 100%;
overflow: auto;
clear: both;
}
.mac-window .title-bar .buttons {
height: 100%;
width: 51px;
float: left;
margin-left: 9px;
}
.mac-window .title-bar .buttons .close, .mac-window .title-bar .buttons .minimize, .mac-window .title-bar .buttons .maximize {
float: left;
height: 10px;
width: 10px;
border-radius: 50%;
margin-top: 5px;
background: #fb4948;
border: solid 1px rgba(214, 46, 48, 0.15);
position: relative;
}
.mac-window .title-bar .buttons .close:before, .mac-window .title-bar .buttons .minimize:before, .mac-window .title-bar .buttons .maximize:before {
content: '';
position: absolute;
height: 1px;
width: 8px;
background: #360000;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%) rotate(45deg);
transform: translateY(-50%) translateX(-50%) rotate(45deg);
opacity: 0;
}
.mac-window .title-bar .buttons .close:after, .mac-window .title-bar .buttons .minimize:after, .mac-window .title-bar .buttons .maximize:after {
content: '';
position: absolute;
height: 1px;
width: 8px;
background: #360000;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
transform: translateY(-50%) translateX(-50%) rotate(-45deg);
opacity: 0;
}
.mac-window .title-bar .buttons .minimize {
background: #fdb225;
margin-left: 8.5px;
border-color: rgba(213, 142, 27, 0.15);
position: relative;
}
.mac-window .title-bar .buttons .minimize:before {
content: '';
position: absolute;
height: 1px;
width: 8px;
background: #864502;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.mac-window .title-bar .buttons .minimize:after {
display: none;
}
.mac-window .title-bar .buttons .maximize {
float: right;
background: #2ac833;
border-color: rgba(30, 159, 32, 0.15);
}
.mac-window .title-bar .buttons .maximize:before {
width: 6px;
height: 6px;
background: #0b5401;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
border: solid #2ac833 1px;
border-radius: 2px;
}
.mac-window .title-bar .buttons .maximize:after {
width: 10px;
height: 2px;
background: #2ac833;
-webkit-transform: translateY(-50%) translateX(-50%) rotate(45deg);
transform: translateY(-50%) translateX(-50%) rotate(45deg);
}
.mac-window .title-bar .buttons:hover .close:before, .mac-window .title-bar .buttons:hover .minimize:before, .mac-window .title-bar .buttons:hover .maximize:before {
opacity: 1;
}
.mac-window .title-bar .buttons:hover .close:after, .mac-window .title-bar .buttons:hover .minimize:after, .mac-window .title-bar .buttons:hover .maximize:after {
opacity: 1;
}
.mac-window .title-bar .title {
overflow: auto;
height: 100%;
text-align: center;
margin-right: 60px;
font-family: ' Helvetica Neue', helvetica, arial, sans-serif;
line-height: 21px;
font-size: 13px;
font-weight: light;
color: #222022;
}
.mac-window .window {
background: white;
max-height: 90vh;
overflow-y: scroll;
height: 100%;
}
</style></head><body>
<div class="section one">
<div class="content">
<h1>Mac Window Module </h1>
<p>
This modal attempts to replicate the look and feel of Mac windows. It includes functioning buttons for closing, maximizing, and minimizing. It does not prevent interaction with the rest of the page.
</p>
<div class="openModal">Open Modal</div>
</div>
<div class="mac-window active">
<div class="title-bar">
<div class="buttons">
<div class="close"></div>
<div class="minimize"></div>
<div class="maximize"></div>
</div>
<div class="title">
Mac Window Modal
</div>
</div>
<div class="window">
<img src="https://unsplash.it/800/1000" style="border: 0;">
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >$(document).ready(function(){
$('.openModal').click(function(){
$('.mac-window').addClass('active');
});
$('.close').click(function(){
$('.mac-window').removeClass('active');
$('.mac-window').removeClass('maximize');
$('.mac-window').removeClass('minimize');
});
$('.minimize').click(function(){
$('.mac-window').toggleClass('minimize');
$('.mac-window').removeClass('maximize');
});
$('.maximize').click(function(){
$('.mac-window').toggleClass('maximize');
$('.mac-window').removeClass('minimize');
});
});
//# sourceURL=pen.js
</script>
</body></html>
