div中的SweetAlert2

Question

我遇到了同样的问题，我希望在一个div中有sweetalert2 (而不是一个甜蜜警报吐司)，因为我希望当甜蜜警报弹出时，除了它之外的另一个div是可滚动的。我已经尝试了上面的代码，但它仍然不能工作。请看这里的图片：sweetalert2

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

我也有固定的位置在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;
}

你能建议我哪里做错了吗？

下面是与我正在构建的JSFiddle类似的代码：https://jsfiddle.net/0pt2vr87/7/

谢谢你的帮助。

Answer 1

您错误地使用了customClass参数，它应该是一个对象，而不是字符串。

​

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>

​

查看官方示例：https://sweetalert2.github.io/recipe-gallery/toast-with-custom-target.html