Bottom Sheet Like Sliding Drawer - jQuery downupPopup.js
File Size: | 6.45 KB |
---|---|
Views Total: | 3836 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
downupPopup.js is a jQuery plugin to create a customizable bottom drawer that slides up from the bottom edge of the screen when triggered.
Inspired by Bottom Sheet component you've seen on Android and iOS.
How to use it:
1. Import jQuery library and the downupPopup plugin's files into the HTML document.
<link rel="stylesheet" href="/path/to/downupPopup.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/downupPopup.js"></script>
2. Add custom content to the bottom drawer.
<div id="myPopup"> <div class="downupPopup-content"> ... drawer content here ... </div> </div>
3. Initialize the downupPopup on the bottom drawer.
$("#myPopup").downupPopup({ // options here });
4. Open/close the bottom drawer.
$('#myPopup').downupPopup('open'); $('#myPopup').downupPopup('close');
5. Specify the height/width of the bottom drawer.
$("#myPopup").downupPopup({ // 70 means 30% of the viewport height // default: 20 distance: 70, // default: 100% width: "80%" });
6. Config the animation.
$("#myPopup").downupPopup({ duration: "300", animation: "ease" });
7. Add a header to the bottom drawer.
$("#myPopup").downupPopup({ headerText: "My Bottom Sheet" });
8. Set the border radius of the bottom sheet. Default: '10px'.
$("#myPopup").downupPopup({ radiusLeft: "15px", radiusRight: "15px", });
9. Determine whether to prevent content scroll. Default: false.
$("#myPopup").downupPopup({ contentScroll: true });
10. Determine whether to show a background overlay when the bottom drawer is opened. Default: true.
$("#myPopup").downupPopup({ background: false });
This awesome jQuery plugin is developed by ali-dincer. For more Advanced Usages, please check the demo page or visit the official website.