Escribí un código usando laravel livewire que hace que aparezca un modal cada vez que un usuario se suscribe con éxito o se ofrece como voluntario para unirse a mi sitio web. Intenté escribir un código que retrasa el modal, pero ahora solo hace que mi código sea más lento en lugar de hacer que desaparezca parte del texto después de unos segundos. Aquí está el código que he escrito en mi archivo blade.
<div wire:loading.delay.short class="bg-white shadow" style="border-radius: 30px"> @if (session()->has('subscription_message')) @include('livewire.frontend.subscribe.success') @endif </div>Quiero que el mensaje de suscripción desaparezca y también he escrito el mensaje de suscripción en otro archivo blade.
<div wire:loading id="modal" class="alert alert-success" role="alert"> <h6 class="alert-heading">Thank you for your Subscription!🤗</h6> <p>{{ session('subscription_message') }}<i class="fa fa-check"></i></p> <p class="mb-0">Kind Regards,<br> {!! 'Ben's Team' !!} </p> </div>Aquí está el componente livewire que controla todo el código en esos dos archivos blade.
public function save() { $this->validateForm(); Subscription::create([ 'name' => $this->name, 'email' => $this->email ]); $name = $this->name; $email = $this->email; $message = "Dear $name ! Thank you for subscribing with Us, Please check your email:($email) for more information."; $this->resetInput(); // Sent Welcome email to subscriber Mail::to($email)->send(new WelcomeSubscriberNotification()); session()->flash('subscription_message',$message); }No sé cómo agotar el tiempo de espera del mensaje flash que aparece después de que un usuario se haya suscrito. ¿Puede alguien ayudarme en una manera de resolver este problema? Quiero usar Livewire, pero si eso no funciona, estoy dispuesto a usar Jquery o Javascript.
Lo tengo. En el archivo blade que muestra el mensaje de éxito después de hacer clic en el botón Enviar, acabo de agregar el siguiente código js.
lima hoja
<div id="modal" class="alert alert-success" role="alert"> <h6 class="alert-heading">Thank you for your Subscription!🤗</h6> <p>{{ session('subscription_message') }}<i class="fa fa-check"></i></p> <p class="mb-0">Kind Regards,<br> {!! 'Ben's Team' !!} </p> </div>Código JS
var timeout = 3000; // in miliseconds (3*1000) $('.alert').delay(timeout).fadeOut(300);</script>