El código para dicha acción no parece ser tan larga:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-modal swal2-icon-success swal2-show" tabindex="-1" role="dialog" aria-live="assertive" aria-modal="true" style="display: flex;">
<div class="swal2-header">
<ul class="swal2-progress-steps" style="display: none;"></ul>
<div class="swal2-icon swal2-error" style="display: none;"></div>
<div class="swal2-icon swal2-question" style="display: none;"></div>
<div class="swal2-icon swal2-warning" style="display: none;"></div>
<div class="swal2-icon swal2-info" style="display: none;"></div>
<div class="swal2-icon swal2-success swal2-icon-show" style="display: flex;">
<div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
<span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
<div class="swal2-success-ring"></div>
<div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
<div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
</div>
<img class="swal2-image" style="display: none;" />
<h2 class="swal2-title" id="swal2-title" style="display: flex;">Done</h2>
<button type="button" class="swal2-close" aria-label="Close this dialog" style="display: none;">×</button>
</div>
<div class="swal2-content">
<div id="swal2-content" class="swal2-html-container" style="display: block;">Request done</div>
<input class="swal2-input" style="display: none;" /><input type="file" class="swal2-file" style="display: none;" />
<div class="swal2-range" style="display: none;"><input type="range" /><output></output></div>
<select class="swal2-select" style="display: none;"></select>
<div class="swal2-radio" style="display: none;"></div>
<label for="swal2-checkbox" class="swal2-checkbox" style="display: none;"><input type="checkbox" /><span class="swal2-label"></span></label><textarea class="swal2-textarea" style="display: none;"></textarea>
<div class="swal2-validation-message" id="swal2-validation-message"></div>
</div>
<div class="swal2-actions">
<button type="button" class="swal2-confirm swal2-styled" aria-label="" style="display: inline-block; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">OK</button>
<button type="button" class="swal2-cancel swal2-styled" aria-label="" style="display: none;">Cancel</button>
</div>
<div class="swal2-footer" style="display: none;"></div>
<div class="swal2-timer-progress-bar-container"><div class="swal2-timer-progress-bar" style="display: none;"></div></div>
</div>
Así que tomaría dicho código para hacer mi propio alert
:
function fire() {
var html=`<div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-modal swal2-icon-success swal2-show" tabindex="-1" role="dialog" aria-live="assertive" aria-modal="true" style="display: flex;"><div class="swal2-header"><ul class="swal2-progress-steps" style="display: none;"></ul><div class="swal2-icon swal2-error" style="display: none;"></div><div class="swal2-icon swal2-question" style="display: none;"></div><div class="swal2-icon swal2-warning" style="display: none;"></div><div class="swal2-icon swal2-info" style="display: none;"></div><div class="swal2-icon swal2-success swal2-icon-show" style="display: flex;"><div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
<span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
<div class="swal2-success-ring"></div> <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
<div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
</div><img class="swal2-image" style="display: none;"><h2 class="swal2-title" id="swal2-title" style="display: flex;">Done</h2><button type="button" class="swal2-close" aria-label="Close this dialog" style="display: none;">×</button></div><div class="swal2-content"><div id="swal2-content" class="swal2-html-container" style="display: block;">Request done</div><input class="swal2-input" style="display: none;"><input type="file" class="swal2-file" style="display: none;"><div class="swal2-range" style="display: none;"><input type="range"><output></output></div><select class="swal2-select" style="display: none;"></select><div class="swal2-radio" style="display: none;"></div><label for="swal2-checkbox" class="swal2-checkbox" style="display: none;"><input type="checkbox"><span class="swal2-label"></span></label><textarea class="swal2-textarea" style="display: none;"></textarea><div class="swal2-validation-message" id="swal2-validation-message"></div></div><div class="swal2-actions"><button type="button" class="swal2-confirm swal2-styled" aria-label="" style="display: inline-block; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">OK</button><button type="button" class="swal2-cancel swal2-styled" aria-label="" style="display: none;">Cancel</button></div><div class="swal2-footer" style="display: none;"></div><div class="swal2-timer-progress-bar-container"><div class="swal2-timer-progress-bar" style="display: none;"></div></div></div>`
document.getElementById("aqui").innerHTML=html;
}
#aqui{
width:250px;
border:1px solid red;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<button onClick="fire()">Lanzar</button>
<div id="aqui">aqui aparecera el mensaje</div>
Claro tomara un poco mas de tiempo mejorarlo, quizá pasar parámetros a un función, especificar el tipo de alerta. Pero la ventaja es que tendrías el dominio "total" del código.
Consejo:
Depender Mucho de una librería para hacer cosas simples, como el de mostrar mensajes, afecta mucho a una pagina, en cosas como:
1.- Los colores no van con los de mi pagina.
2.- Oculta información importante al momento de mostrase.
3.- El efecto de entrada/salida no me gusta.
4.- Como lo modifico para que sea como yo quisiera?.
Quizá todas son cosas triviales. Pero siempre me molestaban al momento de desarrollar mis paginas. Aprender CSS
y Javascript
solucionan estas cuestiones.