Auto resizable popups with scrolling bars

Question

I’m trying to create popups that has a header, body and footer, that resizes depending on the content and to a maximum depending on the viewable content from the browser (if you expand the browser, so does the popup and adjusts), and activate the scrolls when reached overflow of the declared max-height: 80%.

The problem is that, if I use max-height, the div that should be scrollable, does not apply and expands (see example). If I change it to height, then the code works, but all popups have the same height, which is something I don’t want.

See code below (or in jsfiddle).

The second popup that opens from the image, has the large text that needs scroll bars active and I have no idea how to get it to work:

$(function() {
  //Variable used by ESC function
  var current_class = ""

  //----- OPEN on Click
  $('[dataPopup_open]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('dataPopup_open');
    $('[dataPopup="' + targeted_popup_class + '"]').fadeIn(350);
    current_open_class = targeted_popup_class
    e.preventDefault();

    //Fix for selection issue. When text is selected and 
    //popup is shown, scroll bars will not work. 
    //This cancels any selection on current page.
    if (document.selection) {
      document.selection.empty();
    } else if (window.getSelection) {
      window.getSelection().removeAllRanges();
    }
  });

  //----- CLOSE Buttons in POPUP
  $('[dataPopup_close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('dataPopup_close');
    if (e.target !== this) return;
    $('[dataPopup="' + targeted_popup_class + '"]').fadeOut(350);
    e.preventDefault();
    current_open_class = ""
  });

  //----- CLOSE with ESC
  //By pressing ESC and using declared active popup in "current_open_class", this will close active popup. This will not close all popups.
  $(document).keyup(function(e) {
    if (e.keyCode == 27) {
      $('[dataPopup="' + current_open_class + '"]').fadeOut(350);
    }
  });
});

/* Outer */

.popup {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
}
/* Inner */

.popup-inner {
  /*max-width:700px;*/
  padding: 34px 0;
  /*padding-left: 20px;
  padding-right: 20px;*/
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
  border-radius: 3px;
  background: #fff;
  /*
    transition: top .25s ease;
    right: 0;
    bottom: 0;
    margin: auto;
    */
  max-width: 80%;
  max-height: 80%;
}
.popup_padding {
  padding: 20px;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
}
.popup_content {
  background: #cedde5;
  height: 100%;
}
.popup_content h2 {
  margin-top: 0;
}
.pop_header_closeX {
  top: 0px;
  height: 34px;
  width: 100%;
  background: #acd0e2;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  position: absolute;
}
.pop_footer_close {
  bottom: 0px;
  height: 34px;
  width: 100%;
  background: #acd0e2;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position: absolute;
}
/* Close Button */

.popup-close {
  width: 30px;
  height: 30px;
  padding-top: 6px;
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 15px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  /*
    background:rgba(0,0,0,0.8);
    */
  background: none;
  font-family: Arial, Sans-Serif;
  font-size: 20px;
  text-align: center;
  line-height: 100%;
  /*
    color:#fff;
    */
  color: #000000;
  text-decoration: none;
}
.popup-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
  /*
    background:rgba(0,0,0,1);
    */
  background: none;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>TEST POPUP</title>
  <link rel="stylesheet" type="text/css" href="popupCCS.css">
  <script src="..\js\jQueryV3.js"></script>
  <script src="popupJS.js"></script>
</head>

<body>
  <div class="main">
    <div class="content">
      <h2>Bla Bla Title</h2>
      <p>
        <a class="btn" dataPopup_open="popup-1" href="#">Test POPUP 1</a>
      </p>
      <p>
        Test 1
        <ul>
          <li>
            Test pointer 1
          </li>
        </ul>
      </p>
      <p>
        <a class="btn" dataPopup_open="popup-2" href="#">Test POPUP 2</a>
      </p>
      <p>
        Test 2
        <ul>
          <li>
            Test pointer 1
          </li>
        </ul>
      </p>
      <img src="https://s24.postimg.org/3unhjb09x/Test_Image_Popup.jpg" usemap="#ImgPopupCoord">
      <map name="ImgPopupCoord">
        <area shape="rect" coords="12,1,83,59" dataPopup_open="popup-3" href="#">
        <area shape="rect" coords="39,109,67,123" dataPopup_open="popup-4" href="#">
      </map>
    </div>
    <div dataPopup_close="popup-1" class="popup" dataPopup="popup-1">
      <div class="popup-inner">
        <div class="pop_header_closeX">
          <a class="popup-close" dataPopup_close="popup-1" href="#">x</a>
        </div>
        <div class="popup_content">
          <h2>Popup 1 OK</h2>
          <p>
            Test 1
            <ul>
              <li>
                Test pointer 1
              </li>
            </ul>
          </p>
        </div>
        <div class="pop_footer_close">
          <p>
            <a dataPopup_close="popup-1" href="#">Close</a>
          </p>
        </div>
      </div>
    </div>
    <div dataPopup_close="popup-2" class="popup" dataPopup="popup-2">
      <div class="popup-inner">
        <h2>Popup 2 OK</h2>
        <p>
          Test 2
          <ul>
            <li>
              Test pointer 2
            </li>
            <li>
              Test pointer 2
            </li>
            <li>
              Test pointer 2
            </li>
            <li>
              Test pointer 2
            </li>
          </ul>
        </p>
        <p>
          <a dataPopup_close="popup-2" href="#">Close</a>
        </p>
        <a class="popup-close" dataPopup_close="popup-2" href="#">x</a>
      </div>
    </div>
    <div dataPopup_close="popup-3" class="popup" dataPopup="popup-3">
      <div class="popup-inner">
        <h2>Popup 3 Image OK</h2>
        <p>
          Test 3
          <ul>
            <li>
              TEST POPUP for GAOP's
            </li>
          </ul>
        </p>
        <p>
          <a dataPopup_close="popup-3" href="#">Close</a>
        </p>
        <a class="popup-close" dataPopup_close="popup-3" href="#">x</a>
      </div>
    </div>
    <div dataPopup_close="popup-4" class="popup" dataPopup="popup-4">
      <div class="popup-inner">
        <div class="pop_header_closeX">
          <a class="popup-close" dataPopup_close="popup-4" href="#">x</a>
        </div>
        <div class="popup_padding">
          <div class="popup_content">
            <h2>Popup 4 Image with SCROLL OK</h2>
            <p>
              Test 4
              <ul>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3
                </li>
                <li>
                  Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3
                </li>
              </ul>
              <img src="http://www.w3schools.com/css/trolltunga.jpg">
            </p>
          </div>
        </div>
        <div class="pop_footer_close">
          <p>
            <a dataPopup_close="popup-4" href="#">Close</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

You can use css class "vh" to work with the screen dimensions. No need for javascript. This fiddle was forked from your latest link. Some changes were made such as:

jQuery (deleted)

CSS

.popup-inner {
    max-height: 70vh;
}

.popup_padding {
    padding-left: 20px;
    padding-right: 20px;
    width: auto;
    height: auto;
    max-height: 65vh;
    overflow: auto;
}

.pop_header_closeX {
    top: -34px;
}

.pop_footer_close {
    bottom: -34px;
}

You may want to toy around with the positioning and sizing a little, especially via media queries for smaller displays, but this change definitely achieves what you were looking for.