2013-10-08 2 views
2

Привет, я пытаюсь прокрутить до конца загрузочного модального onclick. До сих пор я не имел никакого успеха, но перемещал заднюю часть страницы. Любые идеи о том, что делать?Прокрутка к нижней части бутстрапа (2.3.2) Модальный

Я посмотрел на: Autoscrolling a bootstrap modal on modal('show')
Twitter bootstrap scrollable modal

HTML

<div id="groupModal" class="modal fade"> 
    <div class="modal-footer"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 id="groupName"></h4> 
    </div> 
    <div class="modal-body"> 
     <div class="container-fluid"> 
      <div class="row-fluid"> 
      </div> 
      <div id="interestedDiv" class="collapse"> 
       <form id="interestedForm"> 
        <fieldset> 
         <legend>Interested Form</legend> 
         <input id="firstNameField" class="interestedField" type="text" placeholder="First Name" required> 
         <input id="lastNameField" class="interestedField" type="text" placeholder="Last Name" required> 
         <input id="emailField" class="interestedField" type="email" placeholder="Email" required> 
         <input id="phoneField" class="interestedField" type="tel" placeholder="Phone Number"> 
         <button style="margin-bottom: 10px !important;" id="interestedSubmitButton" type="submit" class="btn btn-custom" disabled="true">Submit</button> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <div class="pull-left"> 
      <a id="interestedBtn" href="#" data-toggle="collapse" data-target="#interestedDiv"><i id="chevron" class="icon-chevron-right"></i> I'm Interested!</a> 
     </div> 
     <!--  <a href="#" data-dismiss="modal" class="btn btn-custom">Close</a>--> 
    </div> 
</div> 

Javascript:

$('#interestedBtn').click(function(event){ 
    if($('#interestedDiv').hasClass('in')) { 
     $('#chevron').attr('class', 'icon-chevron-right'); 
    } else { 
     $('#chevron').attr('class', 'icon-chevron-up'); 
     $('#firstNameField').focus(); 
     $('#groupModal').animate({ 
      scrollTop: $('#groupModal').position().top + $('#groupModal').height() 
     }); 
    } 
}); 
+0

Воспользоваться скрытых элементов в качестве мишеней. – vishalkin

+0

Не могли бы вы привести мне пример? – RyanDawkins

+0

Перейдите по ссылке [** this **] (http://www.tympanus.net/scrollupdown/#fn1.0). – vishalkin

ответ

1

Я сделал это без использования javascript.

FIDDLE

ПОДСКАЗКА: добавить <a href="#"> <button /> </a>

+0

Это не сработало для меня – RyanDawkins

+0

Мне бы хотелось найти решение с Javascript, но это сработало для меня. –

Смежные вопросы