Ajax Loader
×
HTML 
<header></header>
1
<header></header>
2
<main>
3
  <article>
4
    <h2>Header</h2>
5
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptatum harum ipsa nobis ex fugiat cum explicabo similique sequi deserunt repudiandae delectus recusandae doloribus porro eius perspiciatis sint dignissimos sed.</p>
6
    <button>Toggle modal</button>
7
  </article>
8
</main>
9
 
10
<div class="popup-wrapper">
11
  <div class="popup-container">
12
    <article class="popup-body">
13
      <h2>Header</h2>
14
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reprehenderit eius consequuntur optio. Vero incidunt deserunt quidem inventore maxime illum facere beatae maiores dignissimos aperiam nobis autem perspiciatis minus iste!</p>    
15
      <button class="flat">agree</button>
16
      <button class="flat">disagree</button>
17
    </article>
18
  </div>
19
</div>
20
 
21
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
* {box-sizing: border-box;}
1
* {box-sizing: border-box;}
2
 
3
html, body {
4
  height: 100%;
5
  background-color: #303030;
6
  font-family: Roboto;
7
  color: rgba(255, 255, 255, .87);
8
}
9
 
10
header {
11
  background: #212121;
12
  height: 56px;
13
}
14
 
15
main {
16
  padding: 16px;
17
}
18
 
19
article {
20
  padding: 16px;
21
  border-radius: 2px;
22
  background-color: #424242;
23
  box-shadow: 0 0 4px rgba(0, 0, 0, .1),
24
              0 4px 4px rgba(0, 0, 0, .1);
25
  text-align: justify;
26
  -webkit-filter: blur(0px);
27
  filter: blur(0px);
28
}
29
 
30
h1, h2 {
31
  margin: 0;
32
  line-height: 1.6;
33
  font-weight: 300;
34
}
35
 
36
p {
37
  font-size: 13px;
38
  line-height: 1.6;
39
}
40
 
41
button {
42
  padding: 0 8px;
43
  height: 36px;
44
  border: none;
45
  border-radius: 2px;
46
  background: #2196F3;
47
  box-shadow: 0 0 4px rgba(0, 0, 0, .1),
48
              0 4px 4px rgba(0, 0, 0, .1);
49
  text-transform: uppercase;
50
  font-size: 14px;
51
  font-weight: 400;
52
  color: #fff;
53
  outline: none;
54
  transition: all .2s;
55
}
56
 
57
button:hover {
58
  box-shadow: 0 0 6px rgba(0, 0, 0, .2),
59
              0 6px 6px rgba(0, 0, 0, .2);
60
}
61
 
62
button.flat {
63
  background: none;
64
  color: #fff;
65
  box-shadow: none;
66
  float: right;
67
}
68
 
69
button.flat:hover {
70
  background-color: rgba(255, 255, 255, .2);
71
}
72
 
73
.popup-wrapper {
74
  position: fixed;
75
  left: 0;
76
  top: 0;
77
  display: table;
78
  width: 100%;
79
  height: 100%;
80
  background-color: rgba(0, 0, 0, .3);
81
  opacity: 1;
82
  transition-property: opacity visibility transform;
83
  transition-duration: .2s;
84
}
85
 
86
.popup-container {
87
  display: table-cell;
88
  text-align: center;
89
  vertical-align: middle;
90
}
91
 
92
.popup-body {
93
  display: inline-block;
94
  width: 50%;
95
  box-shadow: 0 0 8px rgba(0, 0, 0, .1),
96
              0 8px 8px rgba(0, 0, 0, .1);
97
}
98
 
99
.hidden {
100
  opacity: 0;
101
  visibility: hidden;
102
  transform: scale(2);
103
}
104
 
105
.blur {
106
  -webkit-filter: blur(1px);
107
  filter: blur(1px);
108
}
 
JavaScript 
$('.popup-wrapper').addClass('hidden');
1
$('.popup-wrapper').addClass('hidden');
2
 
3
$('button').click(function () {
4
  $('.popup-wrapper').toggleClass('hidden');
5
  $('main').toggleClass('blur');
6
});
 

Material modal

CSSDeck G+