2016-08-02 64 views
0

我正在開發一個jQuery Mobile項目,我有一個可擴展的彈出窗口,但是當我在彈出窗口中擴展文本時,它不會滾動。 我檢查了overflow: scroll和所有其他選項溢出,但沒有工作。但是當我擴展文本時,我看到一個欄出現在彈出窗口的右側,但沒有滾動。scrollabe jqm彈出不工作

這是最後的代碼,我想,沒有工作,以及

$("#buttonTest").click(function() { 
    $('#Popup').css('overflow', 'scroll');   
    $('#Popup').popup('open'); 
}); 

,這是彈出本身

<div data-role="popup" id="Popup" data-transition="flow"> 
    <div class="newsCards"> 
     <img src="images/back.svg"> 
     <h4> header</h4> 
     <div class="newsFader"> 
      <!-- extended text which is hidden at first --> 
     </div> 
    </div> 
</div> 
+0

你還可以發佈你用來定義彈出窗口的代碼嗎? –

+0

我剛剛那樣做 – hsbr13

+0

需要滾動的元素是帶有「newsCards」的div。 $('。newsCards').css('overflow','scroll');因爲這是溢出的元素。如果沒有看到#Popup的所有CSS,很難說。最好將這些聲明放在CSS中,而不是通過jQuery設置CSS屬性,因爲滾動屬性不太可能改變。 – Benson

回答

0

我試圖通過創建彈出和造型來複制你的使用情況它,使測試可滾動的理想方式是僅使用CSS。 這是我用於文本容器的滾動式newsFader類。

<style type="text/css"> 
    .newsFader { 
     width: 80%; 
     height: 50px; 
     overflow: scroll; 
     margin-left: auto; 
     margin-right: auto; 
    } 
</style> 

也許文本沒有滾動,因爲容器的大小沒有定義,迫使它適應其內容。無論如何,這是我嘗試和正確滾動的彈出代碼:

<div data-role="popup" id="Popup" data-transition="flow"> 
    <div class="newsCards"> 
     <img src=""> 
     <h4> header</h4> 
     <div class="newsFader"> 
      <!-- extended text which is hidden at first --> 
      Lorem ipsum dolor sit amet, consectetur adipiscing 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> 
    </div> 
</div> 

我希望它可以幫助你,快樂編碼!

+0

沒有工作是認爲我需要重新部分重寫這部分,看看會發生什麼。 ..謝謝 – hsbr13

+0

好吧,很抱歉,如果您需要更多幫助,請告訴我 –