如何使用 simpleModal 插件滚动

发布于 2024-10-12 23:41:28 字数 759 浏览 5 评论 0原文

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

原文

I'm using simpleModal plugin
http://www.ericmmartin.com/projects/simplemodal/
when the text in the dialog is too long, I try to scroll, but the entire page is scrolling, even when using modal:true.

so I can't see the end of the dialog , I try define maxHeight - but seem with no effect.

any idea?

code:

 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%']});
 }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哑剧 2024-10-19 23:41:28

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

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

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

You could try to assign some CSS to the modal() call, something like this:

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

In addition you also have the dataCss property available.

回复收藏 0 原文

余厌 2024-10-19 23:41:28

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

It's pretty safe now to use calc in css so this is what I'm doing

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

This says leave at least 10em (5em either side) above and below the dialog. Fortunately even if you resize the window this all adjusts nicely.

I'm using the calc function with 100vh - 10em which means take the viewport height and subtract 1em. You can't use 100% here because this is a nested element. Unfortunately on iOS 100vh includes the space that is obscured by Safari's icon bar so I had to make the amount subtracted 10em to ensure it is always visibile.

Note: I'm using the dataCss which adds style attributes to the content and not the wrapper. This means if you have a border that the border will be fixed and the content scroll nicely inside it.

Read this for a better understanding of vh on iOS: https://github.com/scottjehl/Device-Bugs/issues/36

回复收藏 0 原文

~没有更多了~