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:

  1. another way fix "scroll top before alert opened" issue besides javascript:void(0);

  2. 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.

demo


Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more