div 内的 SweetAlert2

Question

我遇到了同样的问题，我想在 div 中包含 sweetalert2 （不是 sweetalert toast），因为我希望除它之外的另一个 div 在弹出 sweetalert 时可以滚动。我已经尝试过上面的代码，但它仍然无法正常工作。请看这里的图片：

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

Answer 2

谢谢您的解决方案！
@利蒙蒙特

现在我可以在 js googlemap 全屏中使用 Sweetalert2 的技巧了！

( 如何在地图全屏显示时强制 Sweet Alert 2 在 Google 地图上触发？ )