滚动模态，而不是正文

Question

在你引导我回答之前回答的问题之前： 我没有使用 Bootstrap，而且我目前没有使用 [=36] =] 对于我的模式 windows.

我正在使用 this pure HTML/CSS modal。我希望能够滚动浏览一个垂直长的模式（但不超过它），理想情况下同时防止页面的其余部分与其一起滚动。现在，模态框的父 class 设置为 "position: fixed"；我猜修复涉及将其更改为 "absolute"，但除此之外我一无所知。

我唯一能想到的（jQuery-wise）是基于模态不透明度的条件，因此当有可见模态时，只能向下滚动到模态的末尾div（根据其距离顶部的位置+高度）。它并不完美，但这只是一个小挫折，因为在长度方面我知道它仍然会与链接所在的部分大致重合（我不会通过向下滚动模式到达页脚，这就是我的意思）。不过，我确信有一种更聪明的方法可以做到这一点。我对 jQuery 语法不是很熟悉，所以如果建议带有一些代码，我将不胜感激。

或者，请随时向我指出模态 windows 的替代选项。我不反对基于 jQuery 的那些，只要它们足够轻便和简单。不过，我真的想尽可能避免 Bootstrap。

编辑： 说明问题的示例代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style>
body {
    height: 4000px;
}

.modalDialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1040;
    opacity:0;
    transition:         opacity 0.3s ease-in;
    -webkit-transition: opacity 0.3s ease-in;
    -moz-transition:    opacity 0.3s ease-in;
    -o-transition:      opacity 0.3s ease-in; 
    pointer-events: none;
}

.modalDialog > div {
    color: #ffffff;
    height: 2000px;
    position: relative;
    top: 0;
    margin: 2.5%;
    padding: 10px;
    background: #000000;
    z-index: 1050;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

</style>

</head>

<body>
    <a href="#modal">Open the modal window</a>

    <div id="modal" class="modalDialog">
        <div>This is the modal window</div>
    </div>

</body>
</html>

Answer 1

想通了！感谢 wallek876 用溢出属性.

将我推向正确的方向

模态 window 父 class 需要 "position:fixed" 和 "overflow-y:auto".
"Open" 和 "close" link 需要各自的 class 才能被调用。
使用 jQuery，可以根据单击 link 来切换正文溢出（模式打开时禁用滚动，模式关闭时启用滚动）。

具体jQuery：

$(document).ready(function() {
  $('.openModal').click(function() { 
    $('body').css('overflow', 'hidden');
  });
$('.close').click(function() { 
    $('body').css('overflow', 'auto');
  });
});

这里是经过编辑的示例，用于上下文：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<style>

    body {
        height: 4000px;
    }

    a:link, a:visited, a:hover, a:active {
        color: #ff0000;
    }

    .modalDialog {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 1040;
        opacity:0;
        overflow-y: auto;
        transition:         opacity 0.3s ease-in;
        -webkit-transition: opacity 0.3s ease-in;
        -moz-transition:    opacity 0.3s ease-in;
        -o-transition:      opacity 0.3s ease-in; 
        pointer-events: none;
    }

    .modalDialog > div {
        color: #ffffff;
        height: 2000px;
        position: relative;
        top: 0;
        margin: 2.5%;
        padding: 10px;
        background: #000000;
        z-index: 1050;
        border: 2px #ff0000 solid;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

</style>

</head>

<body>

<script>
    $(document).ready(function() {
      $('.openModal').click(function() { 
        $('body').css('overflow', 'hidden');
      });
    $('.close').click(function() { 
        $('body').css('overflow', 'auto');
      });
    });
</script>

    <a href="#modal" class="openModal">Open the modal window</a>

    <div id="modal" class="modalDialog">
        <div><a href="#close" class="close">Close the modal window</a></div>
    </div>

</body>
</html>

滚动模态，而不是正文

Scroll Modal, Not Body

css

jquery

scroll

modal-dialog