WELLCOME BACK
H
ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..
তো এই পোস্টে শেয়ার করতে চলেছি Draggble Bottom Sheet। নাম শুনে বুঝতে না পারলেও ডেমো দেখলে বুঝে যাবে এবং এটির ব্যবহার আপনি Facebook, YouTube এবং আরো অনেক জায়গার দেখে থাকবেন
তো চলুন শুরু করা যাক।
Live Demo
All Codes
index.html
Draggable Bottom Sheet Modal
Bottom Sheet Modal
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.
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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum eligendi commodi tenetur est beatae cupiditate incidunt aspernatur asperiores repudiandae? Odit, nulla modi ducimus assumenda ad voluptatem explicabo laudantium est unde ea similique excepturi fugiat nisi facere ab pariatur libero eius aperiam, non accusantium, asperiores optio. Accusantium, inventore in. Quaerat exercitationem aut, alias dolorem facere atque sint quo quasi vitae sed corrupti perferendis laborum eligendi repudiandae esse autem doloribus sapiente deleniti.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde voluptates, animi ipsa explicabo assumenda molestiae adipisci. Amet, dignissimos reiciendis, voluptatibus placeat quo ab quibusdam illum repellat, ad molestias quaerat saepe modi aperiam distinctio dolore id sapiente molestiae quas! Animi optio nobis nesciunt pariatur? Non necessitatibus mollitia veniam nihil eos natus libero quaerat vitae maiores. Praesentium nesciunt natus tempora. Doloremque, fuga?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt deleniti a non dolorem delectus possimus distinctio! Nemo officiis tempore quos culpa fugit iste suscipit minus voluptatem, officia dicta ad deleniti harum voluptatibus dignissimos in, commodi placeat accusamus sint tenetur non natus? Error fugit quasi repudiandae mollitia doloribus officia eius magnam ratione soluta aut in iusto vel ut minima, at facere, minus sequi earum dolores animi ipsa nihil labore. Odio eius vitae iste repellendus molestias, amet sapiente laudantium optio, provident dignissimos voluptatum nesciunt nemo magni obcaecati commodi officiis delectus esse sed.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat atque labore eligendi iusto sint! Fuga vel eius dolor eligendi ab cumque, maxime commodi, ducimus inventore temporibus illo delectus iste, quisquam ipsum labore eaque ipsa soluta praesentium voluptatem accusamus amet recusandae. Veniam necessitatibus laboriosam deleniti maxime, saepe vitae officia tempora voluptates voluptas ratione fugiat ad? Nostrum explicabo, earum dolor magnam commodi maiores iusto delectus porro ducimus architecto non enim eum, perspiciatis facere mollitia. Minus, mollitia animi! Nostrum deleniti, error quia hic eum modi? Corrupti illo provident dolores qui enim, expedita adipisci.
/* 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: #E3F2FD; } .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 .body { height: 100%; overflow-y: auto; padding: 15px 0 40px; scrollbar-width: none; } .bottom-sheet .body::-webkit-scrollbar { width: 0; } .bottom-sheet .body h2 { font-size: 1.8rem; } .bottom-sheet .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 = () => {
bottomSheet.classList.add("show");
document.body.style.overflowY = "hidden";
updateSheetHeight(50);
}
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 = () => {
bottomSheet.classList.remove("show");
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);
bottomSheet.classList.add("dragging");
}
// 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;
updateSheetHeight(newHeight);
}
// 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;
bottomSheet.classList.remove("dragging");
const sheetHeight = parseInt(sheetContent.style.height);
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);
THE END
S
o friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.
