"Sticky Button With Pop Up"
Bootstrap 4.0.0 Snippet by vijay18399

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
<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="feedback">
<a href="#popup1">Quick Enquiry</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<div class="div1" style="background:#fff">
<a class="close" href="#">×</a>
<div class="content" id="quickenquire">
<h3 style="text-align:center">Send Enquiry</h3>
<form action="#">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="email">Email Id</label>
<input type="email" id="email" name="email">
<label for="comment">Your Message</label>
<textarea></textarea>
<label for="contact">Contact No</label>
<input type="text" id="contact" name="contact">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
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
@charset "utf-8";
/* CSS Document */
body {
font-family: Arial, sans-serif;
background: url(http://www.clovisbookbarn.com/wp-content/uploads/2013/10/Blue-Sea-Sky-Clouds1.jpg) no-repeat;
background-size: cover;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 30px auto;
padding: 15px;
border-radius: 5px;
width: 49%;
position: absolute;
left: 35%;
/* transition: all 5s ease-in-out; */
}
.popup h2 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: