Dado un documento HTML y la tarea es crear un modal de arranque que se pueda desplazar y arrastrar en un dispositivo móvil. Esta tarea se puede lograr fácilmente utilizando los modales «Desplazamiento de contenido largo» disponibles en la biblioteca de Bootstrap.
Enfoque: los modales se construyen con HTML, CSS y JavaScript. Se colocan sobre todo lo demás en el documento, por lo que eliminan el desplazamiento del elemento <body> para que el contenido modal se desplace. Cuando los modales se vuelven demasiado largos para la ventana gráfica o el dispositivo del usuario, se desplazan independientemente de la página misma. Por lo tanto, para crear un modal que se pueda arrastrar y desplazar en dispositivos móviles, no es necesario realizar ningún trabajo adicional, excepto exportar un modal predeterminado de la biblioteca de Bootstrap y se podrá desplazar automáticamente una vez que agreguemos contenido largo dentro del cuerpo modal. . Consulte el ejemplo dado para una demostración adicional.
Ejemplo:
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>
Producción:
