Have you ever used an app like Facebook or Instagram and see a modal that slides up from the bottom of the screen? These bottom-sheet modals are a great way to provide users with additional information or functionality without taking up too much screen space. As a beginner web developer, you might wonder how to create one of these modals yourself.
In this blog post, I’ll show you how to create a draggable bottom sheet modal using HTML, CSS, and jаvascript from scratch. This modal allows the user to view its contents, drag it up or down, and close it similarly to Facebook. It is responsive and also works on touch-enabled devices like phones.
To create a draggable bottom sheet modal using HTML, CSS, and jаvascript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
To start, add the following HTML codes to yourindex.htmlfile to create a basic layout for our modal. This code includes a “button” element and a “div” container that includes modal content. The button will use to show the modal on click.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Draggable Bottom Sheet Modal | Ticcix</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<button class="show-modal">Show Bottom Sheet</button>
<div class="bottom-sheet">
<div class="sheet-overlay"></div>
<div class="content">
<div class="header">
<div class="drag-icon"><span></span></div>
</div>
<div class="body">
<h2>Bottom Sheet Modal</h2>
<p>Create a bottom sheet modal that functions similarly to Facebook modal using HTML CSS and jаvascript.
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>
<p>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.</p>
<p>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?</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
</body>
</html>Next, add the following CSS codes to your style.css file to style the bottom sheet modal and the button. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties. Upon adding these styles, the modal will initially be hidden in the browser, while the button remains visible.
/* Import Google font - Montserrat */
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #475d6d;
}
.show-modal {
outline: none;
border: none;
cursor: pointer;
color: #fff;
border-radius: 6px;
font-size: 1.2rem;
padding: 15px 22px;
background: #04162c;
transition: 0.3s ease;
box-shadow: 0 10px 18px rgba(7, 21, 75, 0.18);
}
.show-modal:hover {
background: #04163c;
}
.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;
}Finally, add the following jаvascript code to your script.js file to add the functionality of show/hide, and drag up and down to the modal. Upon adding these scripts, when you click on the button, the modal will slide up from the bottom.
// 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 < 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);
In short, we started by setting up a basic button and modal container. Using CSS, we make them visually appealing while ensuring the modal remains hidden initially. Lastly, we implemented jаvascript functionality to allow for the show/hide feature of the modal and enabled the ability to drag it up or down as desired
Info
Please login to view information Auth!
Please login to view information Auth!
Tags:
0 Comments
Information
Users of Guests are not allowed to comment this publication.
Users of Guests are not allowed to comment this publication.