javascript - Bootbox modal scrolls to top of page before opening -
i using bootstrap 3 , bootbox.js filterable portfolio, , want able scroll down when modal longer browser window, should not able scroll past modal.
by default when click portfolio item modal scroll top of page open it. used javascript:void(0);
on portfolio links fix this. position:absolute
on .modal
breaks that.
but position:absolute
, overflow:auto
allows me scroll modal way need (just dont know how limit scrolling till end of modal)
check out css:
.modal { top: 10%; left: 50%; margin-left: -280px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; outline: none; display: table; position: absolute; } .modal-open { overflow: auto; }
you can @ live version of site here (scroll portfolio , click project)
i have set fiddle make easier everyone: http://jsfiddle.net/p4yw2/
so need:
another way fix "scroll top before alert opened" issue besides
javascript:void(0);
a way limit scrolling until little bit after modal (right can scroll way down page when modal open)
update: ok causing issue smooth-scroll.js file consists of:
$(function(){ var $window = $(window); var scrolltime = 0.7; var scrolldistance = 275; $window.on("mousewheel dommousescroll", function(event){ event.preventdefault(); var scrolltop = $window.scrolltop(); var finalscroll = scrolltop - parseint(delta*scrolldistance); tweenmax.to($window, scrolltime, { scrollto : { y: finalscroll, autokill:true }, ease: power1.easeout, overwrite: 5 }); }); });
if don't need bootbox (based on requirements in question seems overkill) want sounds bootstrap offers out of box it's modal loading remote content. can have different modal 'contents' store individual pages , have each link point different piece of modal content. e.g:
<a href="path_to_remote_content" data-toggle="modal" data-target="#modal" id="branding1">
.
this technique require have empty modal code in page already, , contents loaded .modal-content
.
modal html page
<!-- modal --> <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div>
remote content html
<div class="modal-header"> <h4>beach me</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div>
you'll need remove of styles you've added override bootstrap's modal styles.
Comments
Post a Comment