2

Estoy usando sweetalert para hacer notificaciones, pero hay una peculiaridad con un requerimento, quieren ver la animación y la forma del sweetalert, pero sin el modal. He rebuscado por todos lados pero creo que no es soportado o si hay algun truco para hacerlo

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>

Esta es su forma más natural de la librería, pero queremos conseguir esto, la animación y la forma pero sin el modal, debe caer en un div, por ejemplo. introducir la descripción de la imagen aquí

3 respuestas 3

2
+100

Según la documentación necesitas indicar:

  • target: El elemento contenedor para agregar modal en.
  • customClass: Una clase CSS personalizada para el modal.

Ejemplo:

function fire() {
  Swal.fire({
    icon: 'success',
    title: 'Done',
    text: 'Request done',
    allowOutsideClick: false,
    backdrop: false,
    customClass: {
      container: 'swal2-container-position'
    },
    target: document.getElementById('container')
  });

}
.swal2-container.swal2-container-position {
  position: absolute;
}
.swal2-container.swal2-container-position > .swal2-modal {
  background-color: transparent;
  border: 0px;
}
body.swal2-no-backdrop .swal2-container.swal2-container-position>.swal2-modal{
  box-shadow: none;
}

#container {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #eee;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<button onClick="fire()">Lanzar</button>

<div id="container"></div>

2

lo que puedes hacer modificando los css de sweetAlert:

function fire() {
  Swal.fire({
    icon: 'success',
    title: 'Done',
    text: 'Request done',
    allowOutsideClick: false,
    backdrop: false,
    showClass:
    {
  popup: 'swal2-show',
  backdrop: 'swal2-backdrop-show',
  icon: 'swal2-icon-show'
}
  });

}
.swal2-modal {
  background-color: rgba(0,0,0,0) !important;
  border: 0px !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<button onClick="fire()">Lanzar</button>

1
  • Casi perfecto, sólo que este hack pondrá el swal enmedio de la pantalla, y me encantaría estuviera en un div, crees que eso sea posible? Commented el 3 jun. 2020 a las 3:32
1

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.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.