Twitter引導程序：在錨點鏈接上觸發模式/滾動

我正在使用twitter引導工作在移動webapp上。Twitter引導程序：在錨點鏈接上觸發模式/滾動

現在我想要一個鏈接指向/跳轉到文檔中的錨點，然後立即顯示一個模式。模態應該是一個警告消息，用戶首先必須閱讀，然後他可以確認並關閉模型，單擊「瞭解」按鈕。

有沒有辦法達到這個目的？我堅持這一點，並找不到出路...

欲瞭解更多信息下面的圖片。

modal warning message after anchor scroll

如果與紅色箭頭鏈路上的用戶點擊，文檔內容應滾動到對應的錨定，並在同一時間的警告模態應示出。

對不起，對於嵌入式圖像上的部分德語。

Thx很多傢伙。

來源

2014-09-11 Mediazombie

假設你的鏈接有一類特殊的（我用.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

來源

2014-09-11 12:58:29 Sebsemillia

非常感謝您......這正是我尋找！但是，如果我第一次單擊第4節鏈接後點擊其他節鏈接，模式也會觸發...有沒有辦法避免這種情況？ – Mediazombie 2014-09-11 13:18:23

是的！只需在函數中添加'$（this）.unbind（「scroll」）;'。我更新了我的答案和bootply。 – Sebsemillia 2014-09-11 13:25:35

現在效果很好...... thx很多。 :) – Mediazombie 2014-09-12 04:45:10

是你可以做，但你必須手動加載模態

<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 2014-09-12 04:46:45

Twitter引導程序：在錨點鏈接上觸發模式/滾動

回答

相關問題