加載覆蓋在工作的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> 

在其他的佈局，我裝載儀jQuery的3.2.1，在我的主頁，我擴展主佈局（jquery被加載的地方），幷包含上面的佈局。該頁面的源代碼看起來像這樣渲染器（Chrome網頁的源文件）後：

<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. 您需要添加源代碼的腳本js後jquery

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相同

希望它會幫助你。

感謝