How to make Draggable and Scrollable Bootstrap modal on android device ?

Last Updated : 18 Jan, 2021

Given an HTML document and the task is to create a bootstrap modal that can be scrolled and dragged on a mobile device. This task can be easily achieved using the “Scrolling long content” modals available in the Bootstrap library.

Approach: Modals are built with HTML, CSS, and JavaScript. They are positioned over everything else in the document, thus they remove scroll from the <body> element so that modal content scrolls instead. When modals become too long for the user’s viewport or device, they scroll independently of the page itself. So, in order to create a modal that is draggable and scrollable in mobile devices, no additional work has to be done except for exporting a default modal from the Bootstrap library and it will automatically become scrollable once we add some long content inside the modal body. Refer to the given example for further demonstration.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0" />
  
    <!--Bootstrap CSS CDN-->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous" />
  
    <!--Bootstrap javascript plugins-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h2 class="m-5">Long Scrollable Modal</h2>
  
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary m-5" 
        data-toggle="modal" 
        data-target="#exampleModalLong">
        Launch demo modal
    </button>
  
    <!-- Modal -->
    <div class="modal fade" id="exampleModalLong" 
        tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLongTitle"
        aria-hidden="true">
          
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLongTitle">
                        GeeksforGeeks
                    </h5>
                    <button type="button" class="close" 
                        data-dismiss="modal" 
                        aria-label="Close">
  
                        <span aria-hidden="true">
                            ×</span>
                    </button>
                </div>
                <div class="modal-body">
                    Bootstrap is a free and open-source
                    tool collection for creating responsive 
                    websites and web applications. It is the
                    most popular HTML, CSS, and JavaScript 
                    framework for developing responsive, 
                    mobile-first web sites. Nowadays, the 
                    websites are perfect for all the browsers
                    (IE, Firefox and Chrome) and for all sizes
                    of screens (Desktop, Tablets, Phablets, 
                    and Phones). All thanks to Bootstrap
                    developers – Mark Otto and Jacob Thornton
                    of Twitter, though it was later declared
                    to be an open-source project.
                </div>
  
                <div class="modal-footer">
                    <button type="button" 
                        class="btn btn-secondary" 
                        data-dismiss="modal">
                        Close
                    </button>
  
                    <button type="button" 
                        class="btn btn-primary">
                        Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

My Personal Notes

Related Articles

Table of Contents

How to make Draggable and Scrollable Bootstrap modal on android device ?

HTML