加载覆盖在JSFiddle中工作,但不在Laravel中

时间:2017-06-13 08:43:38

标签: jquery html laravel

我有这个简单的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的地方)并包括上面的loading布局。渲染后页面源如下所示(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>

CONSOLE ERROR:

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

1 个答案:

答案 0 :(得分:1)

  

如果我复制粘贴JSFiddle中的代码,它可以工作。它没有图像,但这不相关,因为它存储在本地,但叠加显示为预期。

您可以尝试:

  1. 您需要在jquery

  2. 之后的脚本js中添加源代码
  3. 在blade.php中,我看到你到处都添加了代码,所以错了。您可以将css,js添加到blade.php中,但需要在jquery lib之后添加。 =&GT; laravel:使用块或@stack(&#39; ...&#39;)

  4. <强>演示:

    布局:

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

    希望它会对你有所帮助。

    由于