如何使用滾動與simpleModal插件

我使用simpleModal插件 http://www.ericmmartin.com/projects/simplemodal/ 當對話框中的文本太長，我試着滾動，但整個頁面滾動，使用模式，即使：真。如何使用滾動與simpleModal插件

，所以我不能看到對話框結束時，我嘗試定義maxHeight - 但沒有效果看起來。

有什麼想法嗎？

代碼：

function loadDialog(Code,vrsnNum) 
{ 
    vrsnNum=vrsnNum-1; 
    $.get(
    "/ajaxVerision.asp", 
    {Code: Code,VerisionNum: vrsnNum}, 
    function(data) 
    { 
    $(".CrnrPager").html(data); 
    } 
    ); 

    $.get(
    "/ajaxVerisionNext.asp", 
    {Code: Code,VerisionNum: vrsnNum}, 
    function(data) 
     { 
     $("#sp1").html(data); 
     } 
    ); 

    $('#basic-modal-content').modal({maxHeight: 400,autoPosition : true, position: ['20%','25%']}); 
}

來源

2011-01-20 Gooloosh

你可以嘗試一些CSS分配給modal()通話，是這樣的：

$('#basic-modal-content').modal({ 
    maxHeight: 400, 
    autoPosition: true, 
    containerCss: { 
     'maxHeight' : '400px', 
     'overflow' : 'auto' 
    }, 
    position: ['20%', '25%'] 
});

另外你也有dataCss屬性中可用。

來源

2011-01-20 12:50:12 polarblau

我說「寬度：490px;溢出 - X：隱藏; _height：400像素;最大高度：400像素;溢出-Y：汽車;」以data-div的風格，並糾正這個問題，謝謝你的想法。 – Gooloosh 2011-01-22 19:19:41

這是非常安全的，現在要在CSS中使用calc所以這就是我上面和下面的對話框做

$('#confirmDialog').modal(
{ 
    dataCss: 
    { 
      'maxHeight': 'calc(100vh - 10em)', // spaces are needed 
      'overflow': 'auto' 
    } 
});

這是說離開至少10em（5em的兩側）。幸運的是，即使調整窗口大小，這一切都可以很好地調整。

我使用calc功能與100vh - 10em這意味着採取視口的高度和減去1em。這裏不能使用100%，因爲這是一個嵌套元素。不幸的是，在iOS 100vh包括被Safari的圖標欄遮擋的空間，所以我必須減去10em的數量以確保它總是可見的。

注：我使用的是dataCss這增加了樣式屬性的內容，而不是包裝。這意味着如果您有一個邊框，邊框將被固定，並且內容在其中很好地滾動。

閱讀本在iOS更好地理解vh：https://github.com/scottjehl/Device-Bugs/issues/36

來源

2015-04-30 20:31:35

如何使用滾動與simpleModal插件

回答

相關問題