Twitter Bootstrap: триггер модальный на привязке/прокрутке

Question

Я работаю над мобильным webapp с твитер-бутстрапом.

Теперь мне нужна ссылка, которая указывает/прыгает на якорь в документе, а затем мгновенно отображает модальный. Модальное сообщение должно быть предупреждением, которое пользователь должен прочитать, а затем он может подтвердить и закрыть модальный щелчок по кнопке «поймите».

Есть ли способ для этого? Я застрял на этом и не могу найти выход ...

Для получения более подробной информации приведенный ниже снимок.

Если пользователь нажимает на ссылку с красной стрелкой, содержимое документа следует перейти к соответствующему якорю и в то же время предупреждения покадрово должен показано.

Извините за частично немецкий язык на встроенном изображении.

Thx много парней.

Answer 1

Если предположить, что связь есть специальный класс (я использовал .trigger для примера), вы могли бы сделать это:

$('.trigger').on('click', function() { 
    $(window).scroll(function() { 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     $('#myModal').modal('show');   
    }, 250)); 
    $(this).unbind("scroll"); 
}); 

Я создал пример bootply с шаблоном, который напоминает ваш скриншот структуру немного. Так что не путайте. Просто нажмите на ссылку section 4 с левой стороны (прокрутите вниз немного), чтобы увидеть функциональность в действии.

ПРИМЕЧАНИЕ: Я сфокусированы на вас заявление:

Теперь я хочу ссылку, что точки/перескакивает на якорь в документе, а затем мгновенно отображает модальное.

Чтобы открыть мода, откроется после свиток закончен. Ответ @Shreeraj Karki открывает модальность сразу после щелчка.

BOOTPLY

Answer 2

да вы можете сделать, но вы должны загрузить модальный вручную

<a href="#desiredlocation" onclick="load_modal()"> 

</a> 


<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

<script type="text/javascript"> 
function load_modal(){ 
$('#myModal').modal('show'); 
} 
</script> 

вот fiddle