Bootstrap Scrollable Modal
home
Run
screen_rotation
fullscreen
cloud_download
navigate_next
<html> <head> <title>Bootstrap Grid</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <style> .modal .modal-body { max-height: 350px; overflow-y: auto; } </style> </head> <body> <!----modal starts here---> <div id="tutorialsplaneModal" class="modal fade" role='dialog'> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Tutorialsplane Modal Demo</h4> </div> <div class="modal-body"> <img src="https://www.tutorialsplane.com/wp-content/uploads/2017/01/sky-721912_640.jpg" style="max-height:200px;width:100%;"> <p> Here the description starts here........Here the description starts here........ Here the description starts here........Here the description starts here........Here the description starts the starts here........Here the description starts here........Here the description starts here.... Here the description starts here........Here the description starts here........Here the description starts the starts here........Here the description starts here........Here the description starts here.... </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!--Modal ends here---> <!----add button to trigger the modal----> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Modal</button> </body> </html>
<html> <head> <title>Bootstrap Grid</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <style> .modal .modal-body { max-height: 350px; overflow-y: auto; } </style> </head> <body> <!----modal starts here---> <div id="tutorialsplaneModal" class="modal fade" role='dialog'> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Tutorialsplane Modal Demo</h4> </div> <div class="modal-body"> <img src="https://www.tutorialsplane.com/wp-content/uploads/2017/01/sky-721912_640.jpg" style="max-height:200px;width:100%;"> <p> Here the description starts here........Here the description starts here........ Here the description starts here........Here the description starts here........Here the description starts the starts here........Here the description starts here........Here the description starts here.... Here the description starts here........Here the description starts here........Here the description starts the starts here........Here the description starts here........Here the description starts here.... </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!--Modal ends here---> <!----add button to trigger the modal----> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Modal</button> </body> </html>
Copyrights@tutorialsplane.com