How to make Draggable and Scrollable Bootstrap modal on android device ?
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= integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <!--Bootstrap javascript plugins--> integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src= integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src= 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:
Please Login to comment...