Twitter Bootstrap : 앵커 링크에서 스크롤/스크롤

트위터 부트 스트랩이있는 모바일 웹 응용 프로그램에서 작업하고 있습니다.Twitter Bootstrap : 앵커 링크에서 스크롤/스크롤

이제 문서에서 앵커를 가리키고 점프하는 링크를 원한다면 즉시 모달을 표시하십시오. 모달은 사용자가 먼저 읽어야하는 경고 메시지 여야하며 "이해"버튼을 클릭하면 모달을 확인하고 닫을 수 있습니다.

연락 방법이 있습니까? 나는 이것에 붙어서 나가는 길을 찾을 수 없다 ...

아래의 더 자세한 정보는 아래의 이미지를 참조하십시오.

modal warning message after anchor scroll

적색 화살표와 사용자가 링크를 클릭은 상기 문서 컨텐트의 경고 모달 대응 앵커 동시에 스크롤할지

도시한다.

임베디드 이미지에 부분적으로 독일어가 표시되어 불쌍합니다.

많은 사람들.

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

나는 스크린 샷 구조 약간 유사한 템플릿으로 bootply 예를 만들어 : 귀하의 링크를 가정

출처

2014-09-11 Mediazombie

은 특별한 클래스 (필자는 예를 들어 .trigger을 사용),이 작업을 수행 할 수 있습니다. 그러니 혼동하지 마십시오. 작동중인 기능을 보려면 왼쪽의 section 4 링크를 클릭하십시오 (조금 아래로 스크롤).

참고 : 나는 당신이 문에 초점을 맞춘이 :

은 지금은 포인트/문서의 앵커로 이동 한 후 즉시 모달를 표시하는 링크를합니다.

이후에 모달이 으로 열리므로 스크롤이 완료됩니다. @Shreeraj Karki 대답은 클릭 즉시 모달을 엽니 다.

BOOTPLY

출처

2014-09-11 12:58:29 Sebsemillia

대단히 감사의 ... 그게 내가 찾고 정확히입니다! 그러나 섹션 4 링크를 처음 클릭 한 후 다른 섹션 링크를 클릭하면 모달이 트리거됩니다 ...이를 피할 수있는 방법이 있습니까? – Mediazombie

예! 그냥 함수에'$ (this) .unbind ("scroll");를 추가하십시오. 나는 내 대답과 bootply를 업데이트했다. – Sebsemillia

그것은 지금 큰 ... thx 많이 작동합니다. :) – Mediazombie

예 당신이 할 수 있지만 수동으로

<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

출처

2014-09-11 13:13:10

귀하의 솔루션에 많은 감사드립니다, 나는 또한 그것을 시도 줄 것이다. – Mediazombie

Twitter Bootstrap : 앵커 링크에서 스크롤/스크롤

답변

관련 문제