Bootstrap Snippet window using HTML

"window"
Bootstrap 3.0.0 Snippet by evarevirus

3.0.0

1.3K 0 Fav

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>  <!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/ibrahimozturkme/pen/ZQLzOP?depth=everything&limit=all&order=popularity&page=5&q=os&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'><link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'> <style class="cp-pen-styles">#bar{background:rgba(0,0,0,0.5); border:none; color:#FFF; padding:0; max-height:56px;} #bar #logo{width:56px; height:56px; color:#FFF; padding:0; text-align:center; line-height:4.3} #bar #logo i{font-size:32px;} #bar #apps{} #bar #apps{margin:0;} #bar #apps li{} #bar #logo:hover, #bar #apps li:hover > a{background:rgba(255,255,255,0.2);} #bar #apps li a{width:56px; height:56px; ; color:#FFF; display:block; line-height:5; padding:0; text-align:center;} #bar #apps li a i{font-size:22px;} #desktop{width:100%; height:100%; position:fixed; top:0; left:0; background:#F33 url(https://24.media.tumblr.com/623ce1b9c183778d872c234e4fa46a71/tumblr_mg5pr3Sg8U1qejlelo3_r3_1280.gif) center top no-repeat; background-size:cover; padding:56px 0 0 0;} #window{width:auto; background:#FFF; box-shadow:0 0 10px rgba(0,0,0,0.1); display:inline-block; position:relative; z-index:1;} #window, #window .body{min-width:280px; min-height:100px;} #window .header{padding:16px 20px; box-shadow:0 0 10px rgba(0,0,0,0.1); cursor:all-scroll} #window .header .title{float:left; font:500 16px/1.5 'Roboto',sans-serif;} #window .header .title i{font-size:22px; float:left; margin-right:10px;} #window .header .right{float:right;} #window .header .right ul{margin:0; padding:0;} #window .header .right ul li{float:left;} #window .header .right ul li a{padding:0 6px; margin:-8px 5px; text-align:center; display:inline-block; color:#333;} #window .header .right ul li a:hover{background:#EAEAEA;} #window .header .right ul li a i{font-size:22px; line-height:1.8;} #window .body{padding:20px; min-width:320px;} #window.fullWidth{width:100%; height:100%; display:block;} #window.fullWidth .body{width:100%; height:100%; display:block;} </style></head><body> <div class="container"> <div id="bar" class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a href="" class="navbar-brand" id="logo"><i class="material-icons">info</i></a> </div> <ul class="nav navbar-nav" id="apps"> </ul> </div> <div id="desktop"> <div id="window" data-id="1" class="animated flipInY"> <div class="header"> <div class="title"><i class="material-icons">account_circle</i> <span class="title">Window Name 1</span></div> <div class="right"> <ul> <li id="down"><a href=""><i class="material-icons">keyboard_arrow_down</i></a></li> <li id="full"><a href=""><i class="material-icons">fullscreen</i></a></li> <li id="close"><a href=""><i class="material-icons">close</i></a></li> </ul> </div> <div class="clearfix"></div> </div> <div class="body"> asdf </div> </div> <div id="window" data-id="2" class="animated flipInY"> <div class="header"> <div class="title"><i class="material-icons">account_box</i> <span class="title">Window Name 2</span></div> <div class="right"> <ul> <li id="down"><a href=""><i class="material-icons">keyboard_arrow_down</i></a></li> <li id="full"><a href=""><i class="material-icons">fullscreen</i></a></li> <li id="close"><a href=""><i class="material-icons">close</i></a></li> </ul> </div> <div class="clearfix"></div> </div> <div class="body"> asdf </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script >$(function(){ $("#window").click(function(){ $("#window").css({'z-index':'1'}); $(this).css({'z-index':'9999'}); }); $("#window[data-id]").draggable({ handle : '.header', containment : '#desktop' }); $("#window .body").resizable({ hande : '.body', containment : '#desktop' }); $("#window[data-id] #down a").click(function(){ var id = $(this).parent().parent().parent().parent().parent().attr("data-id"); var icon = $("#window[data-id="+id+"] .header .title i").text(); var title = $("#window[data-id="+id+"] .header .title span").text(); $(this).parent().parent().parent().parent().parent().removeClass("flipInY").addClass("flipOutX"); if(!$("#openWindow[data-id='"+id+"']").length){ $("#apps").append('<li data-toggle="tooltip" title="'+title+'"><a href="javascript:void(0);" id="openWindow" data-id="'+id+'" class="animated flipInY"><i class="material-icons">'+icon+'</i></a></li>'); } $("a#openWindow").click(function(){ var wid = $(this).attr("data-id"); $(this).parent().remove(); $("#window[data-id='"+wid+"']").removeClass("flipOutX").addClass("flipInY"); }); return false; }); $("#window[data-id] #full a").click(function(){ if($(this).parent().attr('id') == "full"){ $(this).parent().attr('id', 'small'); $(this).parent().parent().parent().parent().parent().addClass("fullWidth"); $(this).find("i").text('fullscreen_exit'); }else{ $(this).parent().attr('id', 'fullscreen'); $(this).find("i").text('fullscreen'); $(this).parent().parent().parent().parent().parent().removeClass("fullWidth"); } return false; }); $("#window #close a").click(function(){ $(this).parent().parent().parent().parent().parent().remove(); return false; }); $("*[data-toggle=tooltip]").tooltip(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Now UI Kit

3.1.0 User Profile in Modal window

Questions / Comments:

Posting GuidelinesFormatting