How to use scrolling with simpleModal plugin

Question

I use the simpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ when the text in the dialog box is too long, I try to scroll, but the whole page scrolls even when using the modal: true.

therefore, I don’t see the end of the dialog, I am trying to determine maxHeight - but it seems to have no effect.

any idea?

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

Answer 1

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

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

In addition, you also have a property dataCss.

Answer 2

Now it’s pretty safe to use calcin css, so this is what I do

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

, 10em (5em ) . , , .

calc 100vh - 10em, , 1em. 100% , . , iOS 100vh , Safari, , 10em, .

. dataCss, , . , , , .

vh iOS: https://github.com/scottjehl/Device-Bugs/issues/36