2016-12-19 21 views
0

この質問は何度か尋ねられています。しかし、答えはどれも私のために働いていませんでした100%divオーバーレイでスクロールバーが表示されないバニラのjavascript

ビデオを見るためにフルスクリーンのオーバーレイを起動する大きなビデオギャラリーがあり、ビデオが再生されているときにスクロールバーが消える必要があります。

ほとんどの場合動作するスクリプトが1つ見つかりましたが、2つの問題があります。まず、マイクロソフトのエッジでは動作しません。第2に、jQueryが必要な唯一のスクリプトです。この依存関係をプロジェクトから取り除くことが大変嬉しいです。ここで私が使用しているスクリプトです。そこに良いバニラのjavascriptの代替ですか?事前に感謝

$(window).load(function() { 
    $(function() { 
    $(".noscroll").click(function() { 
     $(this).next(".hidden").addClass("show"); 
     $(".noscroll").addClass("blurry"); 

     var width = $('body').width(); 

     $("body").css("overflow", "hidden"); 
     var scrollWidth = $('body').width() - width; 
     $('body').css('margin-right', scrollWidth + 'px') 
    }); 
    $(".closebtn").click(function() { 
     $(".hidden").removeClass("show"); 
     $(".noscroll").removeClass("blurry"); 
     $("body").css("overflow", "auto"); 
     $('body').css('margin-right', '0px') 
    }) 
    }); 

    $(document).mouseup(function(i) { 
    var container = $(".hidden"); 
    if (!container.is(i.target) && container.has(i.target).length === 0) { 
     container.removeClass("show"); 
     $(".noscroll").removeClass("blurry") 
    } 
    }) 
    }); 

    $('.closeVid').click(function() { 
    $('body').css('overflow', 'auto') 
    }); 

    $('.noscroll').click(function() { 
    $('body').css('overflow', 'hidden') 
    }); 

    $(document).ready(function() { 
    $('video').addClass("noscroll") 
    }) 
+0

スクリプトは、いくつかの簡単なjqueryの機能である、あなたはバニラJSでと書き換え何の問題もないはずプラスこれは便利かもしれませんhttps://github.com/oneuijs/You-Dont-Need-jQuery – AntK

答えて

0

このような何か? https://jsfiddle.net/konrwcaf/1/

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple modal</title> 
    <style type="text/css"> 
    .modal { 
     position: absolute; 
     display: none; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     background: rgba(0,0,0,0.5); 
     text-align: center; 
     z-index: 9000; 
    } 
    .modalContent { 
     background: #fff; 
     padding: 10px; 
     min-width: 200px; 
     min-height: 100px; 
     display: inline-block; 
     text-align: left; 
     position: relative; 
     top: 50%; 
     transform: translateY(-50%); 
    } 
    body.modalOpen .modal { 
     display: block; 
    } 
    body.modalOpen { 
     overflow: hidden; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="modal"> 
     <div class="modalContent"> 
     <p>I'm the modal</p> 
     <p><button class="modalCloser">Close modal</button></p> 
     </div> 
    </div> 

    <p><button class="modalOpener">Open the modal</button></p> 

    <p>Content</p> 

    <script type="text/javascript"> 
    (function() { 
     var closeButtons = document.querySelectorAll('.modalCloser'); 
     for (var i = 0, l = closeButtons.length; i < l; i++) { 
     closeButtons[i].addEventListener('click', function() { 
      document.body.className = ''; 
     }) 
     } 
     var openButtons = document.querySelectorAll('.modalOpener'); 
     for (var i = 0, l = openButtons.length; i < l; i++) { 
     openButtons[i].addEventListener('click', function() { 
      document.body.className = 'modalOpen'; 
     }) 
     } 
    })(); 
    </body> 
</html> 
+0

先端に感謝します。これまでのところ、すべての試みは私のビデオサムネイルをシャットダウンします。私はブートストラップが関与しているのを見ていないので違いがあるかどうかはわかりませんが、モーダルではなくdivオーバーレイです。私はw3schoolsのフルスクリーンdivオーバーレイの例に基づいてそれを構築しました。試し続けます。 –

+0

ええ、私は約1時間、このプロジェクトに使用されているdiv名にすべてのdiv名を変換しましたが、それは元の形式では機能しましたが、ビデオギャラリーでは全く機能しません。それは非常に多くのことができることがあります。スクリプトとCSSの非常に複雑な組み合わせです。 –

+0

あなたは、ほぼ完全にCSSだった解決策があると思います。シンプルに思えます。ボタンをクリックすると、ぎこちないオーバーフローが消えます。このような運は今まではなかった。 lol –

関連する問題