div内的SweetAlert2

问题描述

我有一个同样的问题，我想在div内包含sweetalert2（而不是sweetalert吐司），因为当弹出sweetalert时，我希望除它之外的另一个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类似的JSfiddle：https://jsfiddle.net/0pt2vr87/7/

感谢您的帮助。

解决方法

您错误地使用了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