"mac window"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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 ---------->
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(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');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard React
3.1.0 User Profile in Modal window

Questions / Comments: