I am using sweetalert to make notifications, but there is a peculiarity with a requirement, they want to see the animation and the form of the sweetalert, but without the modal. I have searched everywhere but I think it is not supported or if there is a trick to do it
function fire() {
Swal.fire({
icon: 'success',
title: 'Done',
text: 'Request done',
});
}<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<button onClick="fire()">Lanzar</button>This is your most natural form of the library, but we want to get this, the animation and the form but without the modal, it should fall into a div, for example.
what you can do by modifying the css of sweetAlert:
According to the documentation you need to indicate:
target: The container element to add the modal to.customClass: ACSScustom class for the modal.Example:
The code for said action doesn't seem to be that long:
So I would take said code to make my own
alert:Of course it will take a little more time to improve it, maybe pass parameters to a function, specify the type of alert. But the advantage is that you would have "total" command of the code.
Advice:
To depend a lot on a library to do simple things, like showing messages, affects a page a lot, in things like:
1.- The colors don't go with those of my page.
2.- Hides important information at the time of display.
3.- I don't like the input/output effect.
4.- How do I modify it so that it is as I would like?
Perhaps they are all trivial things. But they always bothered me when developing my pages. Learn
CSSandJavascriptsolve these issues.