带有滚动条的自动调整大小的弹出窗口答案

【问题标题】：Auto resizable popups with scrolling bars带有滚动条的自动调整大小的弹出窗口
【发布时间】：2016-12-21 14:38:08
【问题描述】：

我正在尝试创建具有页眉、正文和页脚的弹出窗口，根据内容调整大小，并根据浏览器的可查看内容调整到最大值（如果您展开浏览器，弹出窗口和调整)，并在声明的max-height: 80% 溢出时激活滚动。

问题是，如果我使用max-height，应该可滚动的 div 将不适用并展开（参见示例）。如果我将其更改为height，则代码可以工作，但所有弹出窗口的高度都相同，这是我不想要的。

见下面的代码（或jsfiddle）。

从图像打开的第二个弹出窗口有需要滚动条激活的大文本，我不知道如何让它工作：

$(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>

【问题讨论】：

将弹出框设置为内容大小的目的是什么？设置成网页的高度不是更好吗？
嗨，我解释错了。我已经编辑了文本。这个想法是让弹出窗口根据它们的内容调整大小到我指出的由页面大小调节的最大值。宽度有效；这是我有问题的高度。
天哪，这个问题已经进入了正确的泡菜！请注意，Stack Overflow 不是一个实时代码编辑网站 - 我们不希望问题停留在第一个声明是它们已被编辑的状态，因为新读者（即大多数读者）不会看到以前的版本.您的几次编辑似乎是对答案的增量尝试，因此请整理这些内容并将它们放在下方，以便保留问答对。我已将问题回滚到之前的状态。
请注意，只要问题仍然是问题，就允许对问题进行编辑。如果在问题处于特定状态时得到答案，则不应以使现有答案无效的方式编辑问题。或者如果一个问题发生了巨大的变化，以至于它本质上是另一个问题，那么新的材料应该被添加到一个单独的问题中。最后，根据我之前的评论，答案属于问题下方，因此它们在所问问题的上下文中是有意义的。
这样可以吗？

标签： javascript css scrollbar autoresize modalpopups

【解决方案1】：

您可以使用 css 类“vh”来处理屏幕尺寸。不需要javascript。这个fiddle 是从您的最新链接中分叉出来的。进行了一些更改，例如：

~~jQuery~~（已删除）

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;
}

您可能想稍微调整一下定位和大小，尤其是通过媒体查询来获得较小的显示器，但这种更改肯定会达到您的要求。

【讨论】：

您好，感谢您的代码。这没关系，但它会将所有弹出窗口的大小调整到最大值。这个想法是，如果有一个小文本，弹出框就小。如果根据指示的最大值，屏幕上的文字占据的空间超过了屏幕所能容纳的空间，那么应该会出现一个滚动条。（80% 的宽度和高度，因此有一些分离，不会占据整个屏幕）您的解决方案只会最大化弹出窗口。
我在 HTML 中添加了一个类并更改了 jQuery。
感谢您的代码。该代码可以工作，但对于那个特定的弹出窗口。它不适用于所有弹出窗口。然后有overflow:auto 会导致内部div 有一个滚动条（不是我的意图）。请参阅代码中带有 & 且不带溢出：auto 的示例。有：jsfiddle.net/MrHeadSlash/hotL904u/11 和没有：jsfiddle.net/MrHeadSlash/hotL904u/12 删除它，您的代码仍然有效，滚动条仅出现在popup_padding（主体的容器）。单击 Test POPUP 1 以查看差异。如果在所有弹出窗口上使用，都具有相同的高度。
在最后一刻对 js 进行了另一次编辑...高度已更改为最大高度。它可以工作，但弹出窗口页脚中的关闭栏目前并未固定在底部...
太棒了，我编辑了一点，所以它只影响 popup_padding 而不是popup-inner（参见 jsfiddle jsfiddle.net/MrHeadSlash/hotL904u）。现在唯一的问题是，当弹出窗口打开时，如果调整窗口大小，弹出窗口不会调整大小。有没有办法主动调整弹出窗口的大小？