我有这个简单的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
答案 0 :(得分: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相同
希望它会对你有所帮助。
由于