How to make Draggable and Scrollable Modal in Bootstrap?

Last Updated : 24 Jul, 2024

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" models 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>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
    </script>
    <link rel="stylesheet" type="text/css" href=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </script>

    <style>
        .modal-body {
            overflow-y: scroll;
            text-align: justify;
        }
    </style>
</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>

    <script>
        $('.modal-content').resizable({
            minHeight: 300,
            minWidth: 300
        });
        $('.modal-dialog').draggable({
            handle: ".modal-header"
        });
    </script>
</body>

</html>

Output:

How to Pass Data into a Bootstrap Modal?

arpit2205

Improve

Article Tags :

How to make Draggable and Scrollable Modal in Bootstrap?

Similar Reads

Thank You!

What kind of Experience do you want to share?