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? 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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