"pop up"
Bootstrap 3.0.0 Snippet by evarevirus

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

Related: See More


Questions / Comments: