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的地方）并包括上面的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

Answer 1

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

您可以尝试：

您需要在jquery
在blade.php中，我看到你到处都添加了代码，所以错了。您可以将css，js添加到blade.php中，但需要在jquery lib之后添加。 =＆GT; laravel：使用块或@stack（＆＃39; ...＆＃39;）

<强>演示：

布局：

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

希望它会对你有所帮助。

由于

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

1 个答案: