ロードオーバーレイJSFiddleで作業していて、Laravel

Question

に、私は次のコードでこの単純なblade.phpを持っていない。他のレイアウトでは

<script type="javascript"> 
    $("#loading-button").click(
     function() { 
       $("#loading-overlay").show(); 
     } 
    ); 
</script> 

<style type="text/css"> 

    #loading-screen { 
     background: url({{asset('storage/loading.gif')}}) center center no-repeat; 
     height: 100%; 
     z-index: 20; 
    } 

    #loading-overlay { 
     background: #e9e9e9; 
     display: none; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     opacity: 0.5; 
    } 
</style> 

<div id="loading-overlay"> 
    <div id="loading-screen"> LOADING... </div> 
</div> 

、私は私がloding jqueryの-3.2.1と私のメインページにいます（jqueryがロードされている）メインレイアウトを拡張し、上記のloadingレイアウトを含む。ページのソースには、（クロームページのソース）をレンダリングした後、次のようになります

<script type="javascript"> 
    $("#loading-button").click(
     function() { 
       $("#loading-overlay").show(); 
     } 
    ); 
</script> 

<style type="text/css"> 

    #loading-screen { 
     background: url(http://localhost:8000/storage/loading.gif) center center no-repeat; 
     height: 100%; 
     z-index: 20; 
    } 

    #loading-overlay { 
     background: #e9e9e9; 
     display: none; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     opacity: 0.5; 
    } 
</style> 

<div id="loading-overlay"> 
    <div id="loading-screen"> LOADING... </div> 
</div> 
<button id="loading-button">TEST</button> 

私はJSFiddleのコードをコピー＆ペーストした場合、それが動作します。画像はありませんが、ローカルに保存されているので関係はありませんが、オーバーレイは期待通りに表示されます。

メインレイアウトはそれでこれを持っている：

<script src="http://localhost:8000/js/jquery-3.2.1.min.js"></script> 
<script src="http://localhost:8000/js/bootstrap.min.js"></script> 

コンソールエラー：

bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/) 
    at bootstrap.min.js:7 
    at bootstrap.min.js:7 
    at bootstrap.min.js:7 

Answer 1

If I copy paste the code in JSFiddle, it works. It doesn't have the image, but that is not relevant, as it is stored locally, but the overlay displays as expected.

をあなたが試すことができます：

あなたのソースコードを追加する必要がある

1. をjqueryの後のスクリプトjs

2. blade.phpでは、どこにでもコードを追加することができます。 css、jsをblade.phpに追加できますが、jqueryの後にlibを追加する必要があります。 => laravel有する：使用ブロックまたは@stack（ '...'）

デモ：

レイアウト：

<script src="jquery.js" type="text/javascript"></script> 
@stack('jsfile') 

ブレード：

<div id="loading-overlay"> 
    <div id="loading-screen"> LOADING... </div> 
</div> 
<button id="loading-button">TEST</button> 

@push('jsfile') 
<script type="javascript"> 
    $("#loading-button").click(
     function() { 
       $("#loading-overlay").show(); 
     } 
    ); 
</script> 
@endpush 

同じCSSが、それはあなたを助けることを願っています。あなたはdocument.readyイベントハンドラで、あなたのjQueryのコードを配置する必要があり

おかげ