"Make a Popup/Modal Window without JavaScript"
Bootstrap 4.0.0 Snippet by amitchaudharyj

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<h1>Popup/Modal Window without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Click Here to open Pop Up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Example Pop Up</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
<ul >
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</div>
</body>
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
body {
font-family: Arial, sans-serif;
background: url(http://amitchaudhary.in/images/testimonials.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #FF9800;
margin: 80px 0;
}
.box {
width: 50%;
margin: 0 auto;
background: rgba(53, 52, 52, 0.2);
padding: 50px;
border: 2px solid #fff;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #FF9800;
border-radius: 20px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load
animated sinin and signup panel. animated login and registeration page, popup,

Questions / Comments: