jquery - how to fix an element inside bootstrap modal with respect to bootstrap modal -
i want fix element inside bootstrap modal, position: fixed on scrolling moves modal. want stick @ place after modal scrolled.
here jsfiddle. here see patate text has position: fixed css attribute if modal large moves it. how can fix text place stays @ position if modal scrolled.
i had no luck this. please help. thanks.
this might help. using grid inside modal separate fixed div rest of content.
$('.launch-scroll').on('click', function(e) { $('#modal-scroll').modal({ show: true }); });.modal { overflow: hidden; } .modal .modal-body { height: 500px; overflow: auto; } .modal .modal-fixed { position: fixed; background-color:red; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="page-container"> <div class="container"> <br /> <button type="button" class="btn launch-scroll">launch confirm</button> </div> </div> <div class="modal fade" id="modal-scroll"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title">modal title</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-2"> <div class="modal-fixed">patate</div> </div> <div class="col-xs-10"> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> <p>one fine body…</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->
Comments
Post a Comment