A draggable bottom sheet modal is a user interface design element that displays additional content or options in a modal dialog that slides up from the bottom of the screen. This design pattern has become increasingly popular on mobile applications and web interfaces, as it allows users to easily access additional information or options without interrupting their workflow.
About Of Draggable Bottom Sheet Modal
The draggable bottom sheet modal typically consists of a button or tab that is fixed to the bottom of the screen, which when tapped, triggers the modal to slide up from the bottom. The modal itself typically displays additional content, options, or actions, such as a list of related items, a form for inputting data, or additional settings for customizing the user experience.
One of the key benefits of the draggable bottom sheet modal is that it provides users with quick access to additional content or options without requiring them to navigate away from their current context. This can help to reduce cognitive load and increase the efficiency of user interactions.
To create a draggable bottom sheet modal, developers typically use a combination of CSS and JavaScript to define the behavior of the modal when it is opened and closed, as well as the styles and layout of the modal itself. There are also many third-party libraries and frameworks available that can simplify the implementation of draggable bottom sheet modals in various development environments.
Tutorial of Draggable Bottom Sheet Modal
Adding Draggable Bottom Sheet Modal to Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: Log in to your Blogger Dashboard.
Step 2: From the dashboard, select the "Theme" option.
Step 3: Click on the downward arrow icon located next to the "customize" button.
Step 4: Select "Edit HTML" to be redirected to the editing page.
Step 5: Locate the code ]]></b:skin> and insert the desired CSS codes just above it.
/* Draggable Bottom Sheet Modal CSS by Muhammad SA. (sanvedesign.com) */
body.dark,button{background:var(--background);color:var(--foreground)}#sheet,#sheet .overlay{bottom:0;left:0;right:0;top:0}*{margin:0;padding:0}:root{--background:#fff;--foreground:#000;--divider:#dcdcdc;--overlay:#888}@media (prefers-color-scheme:dark){:root{--background:#000;--foreground:#fff;--divider:#333}}body,html{height:100%}body.dark{overflow:hidden;line-height:1.5;-webkit-tap-highlight-color:transparent}button{padding:1rem;font-size:1rem;border-radius:1rem;border:.0625rem solid var(--divider);cursor:pointer}#sheet{position:fixed;z-index:2;visibility:visible;transition:opacity .5s,visibility .5s}#sheet[aria-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}#sheet .overlay{position:absolute;z-index:-1;background:var(--overlay);opacity:.5}#sheet .contents{border-radius:1rem 1rem 0 0;background:var(--background);position:relative;overflow-y:hidden;--default-transitions:transform 0.5s,border-radius 0.5s;transition:var(--default-transitions);transform:translateY(0);max-height:100vh;height:30vh;max-width:70rem;box-sizing:border-box;padding:3rem 1rem 1rem}#sheet .contents:not(.not-selectable){transition:var(--default-transitions),height .5s}#sheet .contents.fullscreen{border-radius:0}#sheet[aria-hidden=true] .contents{transform:translateY(100%)}#sheet .draggable-area{position:absolute;top:0;left:0;right:0;width:3rem;margin:auto;padding:1rem;cursor:grab}#sheet .draggable-thumb{width:inherit;height:.25rem;background:var(--divider);border-radius:.125rem}#sheet .close-sheet{position:absolute;right:0;top:0;border:none}#sheet .body{height:100%;overflow-y:auto;gap:1rem}
Step 6: Now add the following Javascript just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.
<script>/*<![CDATA[*/
const cssFiles=["https://www.cssscript.com/demo/sticky.css","https://unpkg.com/@ivteplo/utilities.css@1.0.0/build/main.css",],head=document.getElementsByTagName("head")[0];cssFiles.forEach(function(e){let t=document.createElement("link");t.rel="stylesheet",t.type="text/css",t.href=e,head.appendChild(t)});const $=document.querySelector.bind(document),openSheetButton=$("#open-sheet"),sheet=$("#sheet"),sheetContents=sheet.querySelector(".contents"),draggableArea=sheet.querySelector(".draggable-area");let sheetHeight;const setSheetHeight=e=>{sheetHeight=Math.max(0,Math.min(100,e)),sheetContents.style.height=`${sheetHeight}vh`,100===sheetHeight?sheetContents.classList.add("fullscreen"):sheetContents.classList.remove("fullscreen")},setIsSheetShown=e=>{sheet.setAttribute("aria-hidden",String(!e))};openSheetButton.addEventListener("click",()=>{setSheetHeight(Math.min(50,720/window.innerHeight*100)),setIsSheetShown(!0)}),sheet.querySelector(".close-sheet").addEventListener("click",()=>{setIsSheetShown(!1)}),sheet.querySelector(".overlay").addEventListener("click",()=>{setIsSheetShown(!1)});const touchPosition=e=>e.touches?e.touches[0]:e;let dragPosition;const onDragStart=e=>{dragPosition=touchPosition(e).pageY,sheetContents.classList.add("not-selectable"),draggableArea.style.cursor=document.body.style.cursor="grabbing"},onDragMove=e=>{if(void 0===dragPosition)return;let t=touchPosition(e).pageY,s=dragPosition-t,n=s/window.innerHeight*100;setSheetHeight(sheetHeight+n),dragPosition=t},onDragEnd=()=>{dragPosition=void 0,sheetContents.classList.remove("not-selectable"),draggableArea.style.cursor=document.body.style.cursor="",sheetHeight<25?setIsSheetShown(!1):sheetHeight>75?setSheetHeight(100):setSheetHeight(50)};draggableArea.addEventListener("mousedown",onDragStart),draggableArea.addEventListener("touchstart",onDragStart),window.addEventListener("mousemove",onDragMove),window.addEventListener("touchmove",onDragMove),window.addEventListener("mouseup",onDragEnd),window.addEventListener("touchend",onDragEnd); /*]]>*/</script>Step 7: Lastly, Save the changes by clicking on this icon
Step 8: That's done! Add the following HTML Codes in your Blog Posts through HTML View to add Draggable Bottom Sheet Modal.
<div class="font-system column fill items-center justify-center">
<h1>Draggable Bottom Sheet Modal</h1>
<p style="margin-bottom:2rem;">Create a draggable, touch-enabled, iOS & Android inspired bottom sheet with smooth slide animations on the page by using plain JavaScript.</p>
<!-- Button to open a sheet -->
<button class="button" id="open-sheet" aria-controls="sheet">Open Sheet</button>
<!-- The sheet component -->
<div id="sheet" class="column items-center justify-end" aria-hidden="true">
<!-- Dark background for the sheet -->
<div class="overlay"></div>
<!-- The sheet itself -->
<div class="contents column">
<!-- Sheet controls -->
<div class="controls">
<!-- The thing to drag if you want to resize the sheet -->
<div class="draggable-area">
<div class="draggable-thumb"></div>
</div>
<!-- Button to close the sheet -->
<button class="close-sheet" type="button" title="Close the sheet">×</button>
</div>
<!-- Body of the sheet -->
<div class="body fill column">
<h2>Hello, World!</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit explicabo vero quas eligendi, eos cupiditate sint aliquam a omnis commodi quos in libero veniam. Quidem, non a quibusdam consequuntur mollitia officia numquam sit quos dolorum quaerat reprehenderit laboriosam perspiciatis consequatur odit error dolore recusandae iste id quam magnam ut! Sint nulla minus excepturi libero officiis, deleniti, delectus obcaecati saepe natus rerum nesciunt!</p>
</div>
</div>
</div>Conclusion
This is all about creating a Draggable Bottom Sheet Modal for Blog Posts. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
© Copyright:
www.sanvedesign.com