Draggable Bottom Modal Using HTML CSS JavaScript with free source code

bottom modal,react native bottom modal,flutter bottom modal,flutter bottom modal sheet height,react native bottom modal example,bootstrap bottom modal,react bottom modal,react native bottom modal sheet,ionic bottom modal,android bottom modal,flutter bottom modal height,bottom sheet modal android,modal bottom sheet android kotlin,modal bottom sheet android compose,modal bottom sheet angular,modal bottom sheet fragment android,difference between model and modal,modal bottom sheet android example,modal vs non-modal,what is modal grade,modal bottom sheet android,android compose modal bottom sheet,bootstrap modal appears at bottom of page,angular modal scroll to bottom,how to fix modal footer at bottom,how to set modal at bottom in react native,bootstrap modal align bottom,bottom modal bootstrap,bottom sheet modal backdrop,lower boundary model,bottom boat model,modal bottom sheet border radius,modal bottom sheet bootstrap,bottom modal sheet flutter,bottom modal react native,bottom modal sheet,bottom modal sheet react native,bottom modal react,bottom modal sheet flutter height,bottom modal sheet android,bottom modal ios,bottom modal css,bottom sheet modal css,modal bottom sheet compose,modal bottom sheet codepen,modal vs non modal popup,modal vs non modal dialog,is modal softer than cotton,css bottom modal,modal bottom sheet jetpack compose,modal slide up from bottom codepen,flutter modal bottom sheet rounded corners,bootstrap modal position bottom codepen,modal slide up from bottom css,close modal bottom sheet flutter,cupertino modal bottom sheet flutter,android modal bottom sheet rounded corners,bottom model definition,flutter bottom modal dialog,bottom down model,modal_bottom_sheet pub dev,modal-dialog-bottom,modal bottom sheet material design,modal vs dropdown,difference between modal and non modal dialog,dismiss modal bottom sheet flutter,draggable modal bottom sheet flutter,import '../modal_bottom_sheet.dart',material design modal bottom sheet,draggable modal bottom sheet,flutter modal bottom sheet dynamic height,design_bottom_sheet model elevation,modal_bottom_sheet example,expo bottom modal,react-native-modal bottom half example,modal bottom sheet flutter example,react native bottom sheet modal example,was ist modal für ein material,what is modal choice,bottom modal flutter,modal bottom sheet flutter height,modal bottom sheet flutter border radius,modal bottom sheet flutter keyboard,modal bottom sheet full screen flutter,modal bottom sheet flutter getx,modal from bottom react native,flutter bottom modal sheet,bootstrap modal slide up from bottom,modal footer fixed bottom,modal slide up from bottom,modal_bottom_sheet github,what is modal range,gorhom bottom sheet modal,getx modal bottom sheet,amodal vs modal,bottom half modal react native,bottom sheet modal html,modal bottom sheet height flutter,html bottom modal,flutter modal bottom sheet height,how to close modal bottom sheet in flutter,flutter modal bottom sheet max height,how to open bootstrap modal from bottom to top,how to show modal bottom sheet in flutter,flutter modal bottom sheet full height,bottom modal in react native,bottom modal in flutter,bottom model images,bottom sheet modal in react native,bottom modal sheet in flutter,bottom sheet modal ionic,bottom sheet popup modal in flutter,modal bottom sheet ios,modal bottom sheet in android,ios bottom modal,ionic bottom sheet modal,ionic modal position bottom,setstate in modal bottom sheet flutter,modal bottom sheet in flutter,modal bottom sheet layout jetpack compose,modal bottom sheet android java,boot model vs boo model,modal vs model programming,scroll to bottom of modal jquery,javascript modal scroll to bottom,co to jest modal,modal bottom sheet kotlin,what is modal selection,flutter modal bottom sheet keyboard,bottom line model meaning,bottom line model definition,modal bottom sheet layout compose,bootstrap modal bottom left,flutter modal bottom sheet listview,android modal bottom sheet layout,bootstrap modal position bottom left,is modal a good base layer,modal bottom sheet material 3,modal bottom sheet material,modal vs module,modal prices,material modal bottom sheet,mui modal bottom,mui bottom sheet modal,what is m modal,what is modal marks,bottom sheet modal react native,modal bottom sheet with navigation component,modal vs non modal window,alternative to bootstrap modal,react native modal slide from bottom,bottom sheet modal using react native,react native modal position bottom,modal slide up from bottom react native,bootstrap modal footer not at bottom,react native bottom tab modal,react native bottom sheet modal backdrop,flutter modal bottom sheet navigation,lower of modal class,bootstrap modal bottom of page,react native modal bottom of screen,scroll to bottom of modal javascript,scroll to bottom of modal angular,bootstrap modal popup open from bottom,open modal from bottom react native,modal open from bottom,increase height of modal bottom sheet flutter,javascript scroll to bottom of modal,cypress scroll to bottom of modal,flutter modal bottom sheet on close,bottom model price,bottom sheet modal provider,flutter bottom popup modal,modal position bottom,bootstrap modal position bottom right,react native modal popup from bottom,bootstrap modal position bottom,q-modal,qml modal dialog,qml modal dialog example,qml modal,modal bottom right,bottom model refrigerator,bottom modal swiftui,show bottom modal sheet flutter,swiftui bottom modal,swift bottom modal,scroll to bottom modal,modal bottom sheet flutter,modal_bottom_sheet,bottom teeth model,bootstrap modal bottom to top,bootstrap 4 modal bottom to top,modal fabric feels like,bootstrap modal scroll to bottom,react modal scroll to bottom,bottom-up modality,bottom up model,bottom up model of reading,bottom up model in hindi,bottom up model meaning,bottom up model of curriculum,bottom up model example,bottom up model biology,bottom-up model of reading example,modal slide up from bottom react,flutter update modal bottom sheet,react native bottom up modal,modal bottom ui,bottom sheet vs modal,v-model alternative,v model when to use,v moda review,is modal good for winter,flutter modal bottom sheet width,modal window scroll to bottom,what are modal sheets,bootstrap modal x button,bootstrap modal x button not working,bottom of tesla model y,tesla model y bottom out,model y base model price,lowest price model y,actual model y range,model y base range,model y trim levels,modal bottom sheet,bootstrap modal z index,z index modal,z-index modal not working,bottom model,model 0-,bottom-most,modal_bottom_sheet ^2.0.1,bootstrap modal full example,bootstrap 3 modal size,model modal difference,3 types of modal,model or modal difference,modal bottom bootstrap 4,what is 40 modal,bootstrap 4 modal open from bottom,bootstrap 4 modal slide from bottom,modal bottom bootstrap 5,find modal class below 10,modal bootstrap 5 not working,bootstrap 5 modal size,bootstrap 5 modal slide up from bottom,bootstrap 5 modal bottom,double bottom measured move,model 7 bottom metal,8 bottom lane sandwich ma

Social Links

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <meta charset="utf-8">
  <title>Draggable Bottom Modal | CodingAyush</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="script.js" defer></script>

  <button class="show-modal">Open Modal</button>
  <div class="bottom-sheet">
    <div class="sheet-overlay"></div>
    <div class="content">
      <div class="header">
        <div class="drag-icon"><span></span></div>
      <div class="modal-body">
        <h2>Draggable Bottom Modal</h2>
        <p>Create a bottom sheet modal that functions similarly to Facebook modal using HTML CSS and JavaScript. This
          modal allows user to view its contents, drag it up or down, and close it. It also works on touch-enabled
          devices. Lorem Ipsum are simply dummy text of there printing and typesetting industry. Lorem new Ipsum has
          been the industryss standard dummy text ever since the 1500s, when an off unknown printer tooks a galley of
          type and scrambled it to makes type spemen book It has survived not only five centuries.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat quae facere, quaerat deleniti, voluptates
          optio ipsam ipsum beatae, maxime quis ea quasi minima numquam. Minima accusamus reiciendis, impedit blanditiis
          nulla quia? Odio deleniti commodi id nesciunt voluptas cumque odit, vel molestias ratione sit consectetur
          inventore error ullam magni labore voluptate doloribus sed similique. Delectus non pariatur eligendi eos
          voluptatum provident eveniet consequuntur. Laboriosam, nesciunt reiciendis libero sunt adipisci numquam
          voluptas ullam, iure voluptates soluta mollitia quam voluptatem? Nemo, ipsum magnam.</p>



/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #11131e;
.show-modal {
  outline: none;
  border: none;
  cursor: pointer;
  color: #fff;
  border-radius: 6px;
  font-size: 1.2rem;
  padding: 15px 22px;
  background: #4A98F7;
  transition: 0.3s ease;
  box-shadow: 0 10px 18px rgba(52,87,220,0.18);
.show-modal:hover {
  background: #2382f6;
.bottom-sheet {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  pointer-events: none;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  transition: 0.1s linear;
.bottom-sheet.show {
  opacity: 1;
  pointer-events: auto;
.bottom-sheet .sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background: #000;
.bottom-sheet .content {
  width: 100%;
  position: relative;
  background: #fff;
  max-height: 100vh;
  height: 50vh;
  max-width: 1150px;
  padding: 25px 30px;
  transform: translateY(100%);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.03);
  transition: 0.3s ease;
.bottom-sheet.show .content{
  transform: translateY(0%);
.bottom-sheet.dragging .content {
  transition: none;
.bottom-sheet.fullscreen .content {
  border-radius: 0;
  overflow-y: hidden;
.bottom-sheet .header {
  display: flex;
  justify-content: center;
.header .drag-icon {
  cursor: grab;
  user-select: none;
  padding: 15px;
  margin-top: -15px;
.header .drag-icon span {
  height: 4px;
  width: 40px;
  display: block;
  background: #C7D0E1;
  border-radius: 50px;
.bottom-sheet .modal-body {
  height: 100%;
  overflow-y: auto;
  padding: 15px 0 40px;
  scrollbar-width: none;
.bottom-sheet .modal-body::-webkit-scrollbar {
  width: 0;
.bottom-sheet .modal-body h2 {
  font-size: 1.8rem;
.bottom-sheet .modal-body p {
  margin-top: 20px;
  font-size: 1.05rem;
// Select DOM elements
const showModalBtn = document.querySelector(".show-modal");
const bottomSheet = document.querySelector(".bottom-sheet");
const sheetOverlay = bottomSheet.querySelector(".sheet-overlay");
const sheetContent = bottomSheet.querySelector(".content");
const dragIcon = bottomSheet.querySelector(".drag-icon");

// Global variables for tracking drag events
let isDragging = false, startY, startHeight;

// Show the bottom sheet, hide body vertical scrollbar, and call updateSheetHeight
const showBottomSheet = () => {
    document.body.style.overflowY = "hidden";

const updateSheetHeight = (height) => {
    sheetContent.style.height = `${height}vh`; //updates the height of the sheet content
    // Toggles the fullscreen class to bottomSheet if the height is equal to 100
    bottomSheet.classList.toggle("fullscreen", height === 100);

// Hide the bottom sheet and show body vertical scrollbar
const hideBottomSheet = () => {
    document.body.style.overflowY = "auto";

// Sets initial drag position, sheetContent height and add dragging class to the bottom sheet
const dragStart = (e) => {
    isDragging = true;
    startY = e.pageY || e.touches?.[0].pageY;
    startHeight = parseInt(sheetContent.style.height);

// Calculates the new height for the sheet content and call the updateSheetHeight function
const dragging = (e) => {
    if(!isDragging) return;
    const delta = startY - (e.pageY || e.touches?.[0].pageY);
    const newHeight = startHeight + delta / window.innerHeight * 100;

// Determines whether to hide, set to fullscreen, or set to default 
// height based on the current height of the sheet content
const dragStop = () => {
    isDragging = false;
    const sheetHeight = parseInt(sheetContent.style.height);
    sheetHeight < 25 ? hideBottomSheet() : sheetHeight > 75 ? updateSheetHeight(100) : updateSheetHeight(50);

dragIcon.addEventListener("mousedown", dragStart);
document.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);

dragIcon.addEventListener("touchstart", dragStart);
document.addEventListener("touchmove", dragging);
document.addEventListener("touchend", dragStop);

sheetOverlay.addEventListener("click", hideBottomSheet);
showModalBtn.addEventListener("click", showBottomSheet);

Post a Comment

Previous Post Next Post