Question

我正在使用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%']});
 }

Answer 1

您可以尝试为modal()调用分配一些CSS，如下所示：

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

此外，您还可以使用dataCss属性。

Answer 2

现在在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

如何使用simpleModal插件滚动

2 个答案: