Javascriptのモーダル - ボディのため無効にスクロールが、CSS

Question

とモーダルのために有効にするには、私は私のモーダルウィンドウのために、このHTMLコードを作成し、私は身体の無効スクロールを行うが、残るべき何

$("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>

モーダルのスクロール？私はCSSソリューションを好むが、jQuery/javascriptも歓迎されている。あなたのモーダルの呼び出しに

Answer 1

方法1

、あなたのbodyにoverflow-y: hiddenを追加します。

$("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

それとも、他にあなたが

.hideScroll { 
    overflow-y: hidden; 
} 

のようなCSSクラスを作成し、モーダルオープンにボディに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を追加提供し、それを一定の高さを与え、モーダルにスクロールを有効にするには、あなたモデルdivを表示するのに必要な最大の高さを追加できます。また、600pxの高さとオーバーフロー - yを与える：すべてのコードの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>