Simple Responsive CSS Floating button with popup form

Last updated Jul 9, 2019

You have seen floating button on many websites or mobile apps like gmail google etc where you can easily compose mail here i am going to create simple floating button to add new article, You can change to use this as quick contact form. A quick floating plus button will always fixed bottom right corner of the page when ever your user click on this icon a bootstrap popup modal will open where you can place any form you want.

Add Simple CSS Floating button with popup form

Libraries

Add jquery core library with bootstrap library for creating modal.

<!--CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
<!--JS-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

CSS

Add css on page for creating and styling floating button.

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}
 
.my-float{
	margin-top:20px;
}

HTML

creating simple floating button fixed on right bottom of the page.

<a href="#" class="float">
<span class="glyphicon glyphicon-plus my-float"></span>
</a>

Add bootstrap modal on page
Add bootstrap model with sample form which trigger whenever user will click on floating button.

<div id="newmodal" class="modal fade" role="dialog">
<div class="modal-dialog modal-md">
 
<div class="modal-content">
<div class="modal-header">
 
<h4 class="modal-title" style="color:#000000">
Add New 
</h4>
</div>
<div class="modal-body">
<form action="">
<div class="form-group">
<input type="text" class="form-control" name="title" style="width:100%" placeholder="Enter Title Here!"  required>
</div>
<div class="form-group">
<textarea type="text" class="form-control" style="width:100%" placeholder="Enter Details!" row="5" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>

JS

Finally add js on page on click of floating button bootstrap modal will popup.

<script>
$(function() { 
  $(".float").click(function() {  
   $("#newmodal").modal('show');
  });
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Bootstrap CSS