javascript - 仅在模态打开时显示模态滚动

Question

您好有人可以告诉我为什么我的解决方案不起作用，我想在模式打开时隐藏我的页面滚动。 并允许在我的模态上滚动。

同时如果能加上上下滑动的效果就很棒了。

我使用了 javascript，但它现在对我不起作用:

$(function(){

$('.modal').click(function() {
$('body').css({'overflow': 'hidden'});
});


$('.close').click(function() {
$('body').css({'overflow': 'scroll'});
});

});

这是我的代码:

<a class="modal" href="#openModal1">Box 1</a>

<div id="openModal1" class="modalDialog">
<a href="#close" title="Close" class="close">x</a>

<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3. You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
</div>
</div>








<a class="modal" href="#openModal2">Box 2</a>

<div id="openModal2" class="modalDialog">
<a href="#close" title="Close" class="close">X</a>
<div class="middle">
Modal Box 2
Box 2
yadda yadda
</div>
</div>




.modalDialog:target > body { overflow:hidden; }

.modalDialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,1);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 100ms ease-in;
    -moz-transition: opacity 100ms ease-in;
    transition: opacity 100ms ease-in;
    pointer-events: none;
}

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

.modalDialog > .middle {
    width: 80%;
    position: relative;
    margin: 10% auto;
    padding: 10px 20px;
    background: #fff;
    overflow:scroll;
}


.close {
    background: #fff;
    color: #000;
    line-height: 0px;
    text-align: center;
    position: absolute;
    right: 10px;
    top: 20px;
    width: 24px;
    text-decoration: none;
}

这是一个jsfiddle

http://jsfiddle.net/kodjoe/3Vykc/641/

Answer 1

您正在尝试使用 jQuery，但您从未包含它。查看下面的代码。我的方法和你的有点不同。我添加和删除类而不是更改 css 属性。

$(function(){

$('.modal').click(function() {
$('body').addClass('scroll');
});


$('.close').click(function() {
$('body').removeClass('scroll');
});

});

.scroll {
  overflow: hidden;
}

.modalDialog:target > body { overflow:hidden; }

.modalDialog {

        overflow:scroll;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(255,255,255,1);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 100ms ease-in;
        -moz-transition: opacity 100ms ease-in;
        transition: opacity 100ms ease-in;
        pointer-events: none;
    }

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

    .modalDialog > .middle {
        width: 80%;
        position: relative;
        margin: 10% auto;
        padding: 10px 20px;
        background: #fff;
    }


    .close {
        background: #fff;
        color: #000;
        line-height: 0px;
        text-align: center;
        position: absolute;
        right: 10px;
        top: 20px;
        width: 24px;
        text-decoration: none;
    }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<a class="modal" href="#openModal1">Box 1</a>

<div id="openModal1" class="modalDialog">
<a href="#close" title="Close" class="close">x</a>

<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3.
You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
<img src="http://teinesantehnika.ee/content/images/thumbs/0022007_apmale-szklana-silver-375-s_500.jpeg">
</div>
</div>








<a class="modal" href="#openModal2">Box 2</a>

<div id="openModal2" class="modalDialog">
<a href="#close" title="Close" class="close">X</a>
<div class="middle">
Modal Box 2 Box 2 yadda yadda
<img src="http://teinesantehnika.ee/content/images/thumbs/0022007_apmale-szklana-silver-375-s_500.jpeg">
</div>
</div>





<div style="background:#ccc;height:1500px;"></div>