如何在提交表单后在Laravel创建短时间警报消息?

Question

这是要在每个页面上包含的自定义警报组件。我尝试使用会话flash，但它仍然在显示消息之前和之后的页面上。如何触发和显示它后，只有提交表单短时间。使用Laravel

@section('alert-section')
<div >
<div class="alert alert-{{$color}}" role="alert" style="height: 36x; line-height:36px; padding:4px 20px;">
<h5>{{$message}}</h5>
</div>
</div>
@endsection

会话flash一直保持到下一个页面重新加载，是否有办法在几秒钟后删除它

@if(isset($message))
<x-alert color="success" message="Data has been updated successfully!" />
@endif

此代码在提交表单后触发消息，但如何在几秒钟后删除它

Answer 1

你可以参考下面的setTimeout示例代码来隐藏一个元素。

setTimeout(() => {
const box = document.getElementById('box');
// 👇️ removes element from DOM
box.style.display = 'none';
// 👇️ hides element (still takes up space on the page)
// box.style.visibility = 'hidden';
}, 1000); // 👈️ time in milliseconds

或者你可以用jQuery试试这个方法:

setTimeout(function() {
$('.alert').fadeOut('fast');
}, 1000); // 👈️ time in milliseconds