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.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <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.
Add bootstrap modal on page
Add bootstrap model with sample form which trigger whenever user will click on floating button.
|
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.
