2014-05-01 55 views
0

我正在一個網站上動態生成可以有任意長度的博客文章。我想限制每個博客文章的高度到一定的高度,比如說250px。如果博客文章的內容超過這個高度,我想將其剪下並顯示「閱讀更多」鏈接,該鏈接將打開顯示整個帖子的模式覆蓋。超過一定長度的段落彈出

我對所有前端視圖開發都使用標準的html/css/js。

我的問題是,如果有一個工具在那裏開箱即用。我在過去發現並使用http://jedfoster.com/Readmore.js/,但它不打開彈出式模態疊加。有沒有類似的readmore.js打開覆蓋圖?

回答

0

我會做到這一點的方法是測試您scrollHeight屬性對客戶高度。這裏有一個例子:

這將提醒「YES」:

<div id="overflow-test" style="height:250px;width:100px;overflow-y:hidden;"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 

<script> 
alert($('#overflow-test')[0].scrollHeight > $('#overflow-test').height() ? "YES" : "NO"); 
</script> 

這將提醒「NO」:

<div id="overflow-test" style="height:250px;width:100px;overflow-y:hidden;"> 
    Lorem ipsum dolor sit amet. 
</div> 

<script> 
alert($('#overflow-test')[0].scrollHeight > $('#overflow-test').height() ? "YES" : "NO"); 
</script> 

基本上,我會用$。每個(試驗過),使更多按鈕可見並啓用,如果他們超出div的高度,並添加代碼使用一個模式對話框如果按鈕被啓用並且它測試超出div的可見部分。

相關問題