Twitter Bootstrap: trigger modal on anchor link/scroll

Question

I'm working on a mobile webapp with twitter bootstrap.

Now I want a link that points/jumps to an anchor in the document and then instantly displays a modal. The modal should be a warning message that the user first has to read and then he can confirm and close the modal on clicking the "have understand" button.

Is there any way to reach this? I stuck on this and can't find a way out...

For further information image below.

If the user clicks on the link with the red arrow, the document content should scroll to the corresponding anchor and at the same time the warning-modal should shown.

Sorry for the partly german language on the embedded image.

Thx a lot guys.

Answer 1

yes you can do but you have to load modal manually

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

here's a fiddle

Answer 2

Assuming your link has a special class (I used .trigger for the example), you could do this:

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

I created an example bootply with a template that resembles your screenshot structure a bit. So don't get confused. Just click the link section 4 on the left side (scroll down a bit), to see the functionality in action.

NOTE : I focussed on you statement:

Now I want a link that points/jumps to an anchor in the document and then instantly displays a modal.

So that the modal opens after the scroll is finished. @Shreeraj Karki answer opens the modal immediately after the click.

BOOTPLY