"mac dialog box"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/aarjithn/pen/yeMNjG?limit=all&page=8&q=mac" /> <style class="cp-pen-styles">html, body { height: 100%; } body { margin: 0; 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; background: url('http://www.biglittlegeek.com/wp-content/uploads/2015/06/os-x-el-Capitan-wallpaper-1920x1080.jpg'); background-size: cover; background-position: center; } .dialogue { font-family: "Helvetica", sans-serif; width: 422px; background: #e7e7e7; border-radius: 5px; box-shadow: 0px 15px 25px 0px rgba(50, 50, 50, 0.7); } .titlebar { width: 100%; height: 22px; background-color: #fff; background: -webkit-linear-gradient(top, #e6e6e6, #c4c4c4); background: linear-gradient(top, #e6e6e6, #c4c4c4); border-radius: 5px 5px 0 0; border-bottom: 1px solid #9e9e9e; } .body { position: relative; padding: 12px; } .icon { width: 60px; position: absolute; left: 25px; top: 25px; } .warning { margin-left: 108px; font-size: 0.8em; font-weight: 700; } .hint { margin-top: 8px; margin-left: 108px; font-size: 0.75em; } .actions { float: right; padding: 15px; } .btn { width: 80px; margin: 0 5px; } .btn.confirm { color: #fff; background: -webkit-linear-gradient(top, #6cb3fa, #067dff); background: linear-gradient(top, #6cb3fa, #067dff); border-width: 0; border-radius: 3px; } .btn.confirm:active { background: #067dff; }</style></head><body> <div class="dialogue"> <div class="titlebar"></div> <div class="body"><img class="icon" src="http://cnet4.cbsistatic.com/hub/i/r/2013/02/04/5e54fcb6-6de8-11e3-913e-14feb5ca9861/resize/270xauto/5dc66f7513da9d66450373bebbe2fe42/ProblemReporterIconX.png"/> <div class="warning">Are you sure you want to permanantly erase the items in Trash?</div> <div class="hint">You can't undo this action.</div> <div class="actions"> <input class="btn" type="button" value="Cancel"/> <input class="btn confirm" type="button" value="Confirm"/> </div> </div> </div> </body></html>

Related: See More

BLK• Design System
"Waiting for..." modal dialog

Questions / Comments: