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.

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

HTML