NiceSnippets.com
Right Side Sticky Button With Bootstrap Modal
Here we are giving you demo of right side sticky button with subscribe form in bootstrap modal. this button call bootstrap on side fixed button.also this demo you can use for submit subscribe newsletter. when you click on fixed button then open bootstrap modal with subscribe newsletter form deisgn.
We allows to free snippets of bootstrap button fixed top , you can download full code of bootstrap sticky layout. Here in this post i will give you example of bootstrap affix snippet and you will get simple code of html, css and jquery. In bootstrap fixed sidebar button snippet i give you three tab with html, css and js, you can easily get code of fixed button on side of website layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<div class="popup-btn" onclick="document.getElementById('id01').style.display='block'">
<a href="#id01">Subscribe For Newsletter</a>
</div>
<div id="id01" class="modal">
<div class="offset-lg-4 col-lg-4 offset-sm-1 col-sm-10 offset-1 col-10">
<div class="modal-body">
<form class="modal-content animate" action="">
<div class="modal-header">
<h5 class="modal-title">Subscribe For Newsletter</h5>
</div>
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<div class="form-part">
<label for="uname"><b>Name : </b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Email Id : </b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button class="btn btn-success submit btn-block">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background-color: #F37338 !important;
}
input[type=text], input[type=password] {
width: 100%;
padding: 10px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.submit{
margin-top:15px;
}
.popup-btn a{
top:200px;
position:fixed;
right:-90px;
z-index: 1000;
transform: rotate(-90deg);
background-color: red;
padding:10px 20px 35px;
height: 0px;
background-color: #000;
color:#fff;
}
.popup-btn a:hover{
text-decoration: none;
color:#fff;
}
.form-part{
padding: 20px 0px;
}
.modal-header{
padding:10px 0px !important;
}
.modal {
display: none;
position: fixed;
z-index: 1 !important;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
width: 80%;
padding: 20px;
border:3px solid #000 !important;
}
.close {
position: absolute;
right:10px;
top:8px;
font-size: 35px;
font-weight: bold;
border-radius: 50%;
height: 30px;
width: 30px;
text-align: center;
}
.close:hover,
.close:focus {
cursor: pointer;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
