SweetAlert2 inside a div

Question

I am having same issue where I want to have sweetalert2 (not a sweetalert toast) inside a div because I want another div besides it to be scrollable when sweetalert is popped up. I have tried above code but It is still not working. please see image here:sweetalert2

var id = document.getElementById('mydiv');
swal({
title: "question",
target: id,
showConfirmButton: false,
showCloseButton: true,
allowOutsideClick: false,
allowEscapeKey : false,
customClass: "swal-height"
});

Also I have fixed positioning in css

#mydiv{
  overflow: hidden;
  height: calc(100% - 300px) !important;
  padding-bottom: 70px;
  position: relative !important;
}

#mydiv .swal-height {
    position:absolute !important;
    height: 720px !important;
    width: 780px !important;
    margin-left: 1100px !important;
    margin-top: 280px !important;
}

Can you please suggest what am I doing wrong here?

here is the JSFiddle which is similar to the one that I am building: https://jsfiddle.net/0pt2vr87/7/

Thanks for your help.

Answer 1

You're using the customClass param wrongly, it should be an object, not a string.

Swal.fire({
  text: 'Modal inside a custom target',
  target: '#custom-target',
  customClass: {                      // <------ customClass is an object!
    container: 'position-absolute'
  },
})

#custom-target {
  position: relative;
  width: 300px;
  height: 200px;
  border-style: solid;
}

.position-absolute {
  position: absolute !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> 

<div id="custom-target"></div>

See the official example: https://sweetalert2.github.io/recipe-gallery/toast-with-custom-target.html