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

时间：2016-12-21 14:38:09

标签： javascript css scrollbar autoresize modalpopups

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

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

请参阅下面的代码（或jsfiddle）。

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

＆＃13;
＆＃13; 
$(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);
    }
  });
});
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

你可以使用css class＆＃34; vh＆＃34;使用屏幕尺寸。不需要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;
}

您可能想要稍微调整定位和尺寸，特别是通过媒体查询较小的显示器，但这种变化绝对可以实现您的目标。

相关问题
最新问题