的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>