如何在simpleModal插件中使用滚动
如何在simpleModal插件中使用滚动
提问于 2011-01-20 19:21:48
我正在使用simpleModal插件http://www.ericmmartin.com/projects/simplemodal/当对话框中的文本太长时，我尝试滚动，但整个页面都在滚动，即使使用modal:true。
所以我看不到对话框的结尾，我试着定义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%']});
}回答 2
Stack Overflow用户
回答已采纳
发布于 2011-01-20 20:50:12
您可以尝试将一些CSS分配给modal()调用，如下所示：
$('#basic-modal-content').modal({
maxHeight: 400,
autoPosition: true,
containerCss: {
'maxHeight' : '400px',
'overflow' : 'auto'
},
position: ['20%', '25%']
});此外，您还可以使用dataCss属性。
Stack Overflow用户
发布于 2015-05-01 04:31:36
现在在css中使用calc是非常安全的，所以这就是我要做的。
$('#confirmDialog').modal(
{
dataCss:
{
'maxHeight': 'calc(100vh - 10em)', // spaces are needed
'overflow': 'auto'
}
});这表示在对话框的上方和下方至少保留10em (5em左右)。幸运的是，即使您调整了窗口的大小，这一切都可以很好地进行调整。
我使用带有100vh - 10em的calc函数，这意味着获取视口高度并减去1em。这里不能使用100%，因为这是一个嵌套元素。不幸的是，在iOS上，100vh包含了被Safari的图标栏遮挡的空间，所以我不得不减去10em以确保它始终是可见的。
注意:我使用的是dataCss，它将样式属性添加到内容，而不是包装器。这意味着如果你有一个边框，边框将是固定的，并且内容可以很好地在里面滚动。
阅读本文可以更好地理解iOS上的vh：https://github.com/scottjehl/Device-Bugs/issues/36
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4746464
复制相关文章
相似问题
腾讯云开发者
