Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"window"
Bootstrap 3.0.0 Snippet by
evarevirus
3.0.0
Preview
HTML
View Full Screen
Fork
Fork this
1.2K
 
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> <!------ 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/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
Free Template
Bootstrap Wizard
175.5K
156
3.1.0 User Profile in Modal window
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76