Sweet alert 2 - 在 div 中间定位 swal

【问题标题】：Sweet alert 2 - position swal in middle of a divSweet alert 2 - 在 div 中间定位 swal
【发布时间】：2017-10-15 11:47:33
【问题描述】：

我需要在 div 的中间放置一个 Swal。根据文档： https://sweetalert2.github.io/

它可以用“目标”参数完成，但它不适合我。

我准备了以下 JSFiddle 来演示这个问题：

swal({
      title: 'Hello',
      target: ".myClass"
        });

谢谢。

【问题讨论】：

【解决方案1】：

目标参数需要与 document.getElementById('myDiv') 一起使用，而不是 ".myClass"

swal({
    title: 'Hello',
    target: document.getElementById('myDiv')
});

目标参数所做的只是让您确定 sweetalert2 div 附加到哪个 div 或元素。默认是

但如果你指定一个 div，你仍然会得到一个全屏覆盖，代码只是简单地附加到你选择的 div 中。

作为一种解决方法，您可以在样式表中提供一些覆盖 CSS：

#myDiv .swal2-container {
    position:inherit;
    height:500px;
    width:500px;
}

<div class="myClass" id="myDiv"></div>

但这仅在您的 div 为空时有效，只要您在 div 中放入任何内容，警报就会在任何内容下方偏移。

【讨论】：