仅在模式打开时显示模式滚动

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>