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
   
Bottom Sheet Like Sliding Drawer - jQuery downupPopup.js

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.