的Javascript模式 - 禁用滚动身体，但能与CSS

Question

模式我创建这个网站的代码为我的模态窗口

$("button").click(function(e){ 
 
    e.preventDefault(); 
 
    $(".wrap-fadeOut").fadeIn(800); 
 
    $('html').css('overflow', 'hidden'); 
 
    $('body').bind('touchmove', function(e) { 
 
     e.preventDefault() 
 
    }); 
 
});

img { 
 
    display: block; 
 
} 
 
.wrap-fadeOut { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: black; 
 
    z-index: 999; 
 
    top: 0; 
 
    left: 0; 
 
    display: none; 
 
} 
 
.modal { 
 
    margin: 2em auto; 
 
    background: white; 
 
    width: 50%; 
 
    border-radius: 5px; 
 
    padding: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button>Show modal</button> 
 
<div class="wrap-fadeOut"> 
 
<div class="modal"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt=""> 
 
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt=""> 
 
<a href="#" class="button closeModal">Button</a> 
 
</div> 
 
</div>

我应该对身体的禁用滚动做什么，但仍滚动.modal？我更喜欢CSS解决方案，但jQuery/JavaScript也很受欢迎。

Answer 1

方法1

在你的模式的调用，添加overflow-y: hidden您body。

$("button").click(function(e){ 
    e.preventDefault(); 
    $(".wrap-fadeOut").fadeIn(800); 
    $('body').css('overflow-y', 'hidden'); 
    $('body').bind('touchmove', function(e) { 
     e.preventDefault() 
    }); 
}); 

然后你需要从body的模式关闭删除overflow-y财产。

$(".closeModal").click(function() { 
    $('body').css('overflow-y', 'auto'); 
    $(".wrap-fadeOut").fadeOut(800); 
}); 

方法2

，要不然你可以创建一个CSS类像

.hideScroll { 
    overflow-y: hidden; 
} 

和CSS类添加到身体上的模式开并取下模态接近。

$("button").click(function(e){ 
    e.preventDefault(); 
    $(".wrap-fadeOut").fadeIn(800); 
    $('body').addClass("hideScroll"); 
    $('body').bind('touchmove', function(e) { 
     e.preventDefault() 
    }); 
}); 

$(".closeModal").click(function() { 
    $('body').removeClass("hideScroll"); 
    $(".wrap-fadeOut").fadeOut(800); 
}); 

注意：要启用滚动的模式，给它一个固定高度&提供overflow-y: auto

.modal { 
    height: 300px; /* customise as per the height required */ 
    overflow-y: auto 
} 

Answer 2

只是在模型类

.model{ 
    max-height: calc(100vh - 210px); 
    overflow-y: auto; 
} 

添加这个CSS，你可以添加任何最大高度，你需要显示模型股......你可以也给600px高度和overflow-y：auto来模拟div其余所有代码都很好。

Answer 3

结帐这个片段

$("button").click(function(e){ 
 
    e.preventDefault(); 
 
    $(".wrap-fadeOut").fadeIn(800); 
 
    $('html').css('overflow', 'hidden'); 
 
    $('body').bind('touchmove', function(e) { 
 
     e.preventDefault() 
 
    }); 
 
}); 
 

 

 
$(".closeModal").click(function(e){ 
 
    e.preventDefault(); 
 
    $('html').css('overflow', 'auto'); 
 
    $(".wrap-fadeOut").fadeOut(800); 
 
});

img { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
.wrap-fadeOut { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: black; 
 
    z-index: 999; 
 
    top: 0; 
 
    left: 0; 
 
    display: none; 
 
} 
 
.modal { 
 
    margin: 2em auto; 
 
    background: white; 
 
    width: 50%; 
 
    border-radius: 5px; 
 
    padding: 1em; 
 
    overflow-x: auto; 
 
    height: 90%; 
 
} 
 
.content { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button>Show modal</button> 
 

 
<div class="content"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
</div> 
 

 
<div class="wrap-fadeOut"> 
 
<div class="modal"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt=""> 
 
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt=""> 
 
<a href="#" class="button closeModal">Button</a> 
 
</div> 
 
</div>