Skip to main content
Commonmark migration
Origen Enlace

Según la documentación necesitas indicar:

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

###Ejemplo:

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>

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>

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>

Recompensa finalizada con 100 de reputación otorgada por Alberto Siurob
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

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>