<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Scroll Example</h2> <p>Request you to view in full screen mode</p> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" id="open">Open Scroll</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content" > <div class="modal-header" > <h4 class="modal-title"></h4> </div> <div class="modal-body"> <div class="scrollbar" id="style-4" > <div class="side-left"> </div> <div class="scroll-content" > <h2>Hindu Scroll (Letter) Example</h2> <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p> <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p> <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p> <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p> <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p> <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p> <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p> <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p> <p>by Anurag Singh</p> <button type="button" class="btn btn-default" id="close">Close</button> </div> <div class="side-right" > </div> </div> <div class="modal-footer" > </div> </div> </div> </div> </div> </div>

/* * STYLE 4 */ #style-4::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-4::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-4::-webkit-scrollbar-thumb { background-color: #000000; border: 2px solid #555555; } .modal-content{ background:transparent; box-shadow:none; border:none; } .modal-header{ background-image:url(header.png); padding: 35px; border:none; background-repeat: no-repeat; background-attachment: fixed; background-position: center 34px; } .modal-body{ padding:0px; text-align:center; } .modal-footer{ padding:35px; background-image:url(footer.png); border:none; background-repeat: no-repeat; background-position: center ; } .scrollbar{ margin-left:58px; height:410px; padding-left:15px; background:#9e2338; color:#fff; width: 486px; display:none; overflow-y: scroll; overflow-x: hidden; height: 400px; } .side-left{ width:28px; background-image:url(left-side.png); float:left; height:410px; } .side-right{ width:28px; background-image:url(right-side.png); float:left; height:410px } .scroll-content{ float:left; width:400px; }

$( "#open" ).click(function() { $('#myModal').modal("show"); $( "#style-4" ).slideDown( "slow", function() { // Animation complete. }); }); $( "#close" ).click(function() { $( "#style-4" ).slideUp( "slow", function() { // Animation complete. $('#myModal').modal("hide"); }); });