我尝试了sweetalert2中的目标选择,但吐司仍然出现在目标之外
我做错了什么?
这里是代码
#trial {
position: absolute;
display: block;
height:200px;
width: 500px;
border: 1px solid;
}
<div id="trial"></div>
<script>
$(document).ready(function() {
var id = document.getElementById('trial');
Swal.fire({
title: 'I will be placed inside the #swal2-container',
toast: true,
target: id,
position: 'bottom-left'
});
});
</script>
这里是结果:
使用target
属性,所发生的就是将DOM容器.swal2-container
附加到目标元素,但是它具有position: fixed;
样式,因此您需要按如下所示进行覆盖:
$(document).ready(function() {
var id = document.getElementById('trial');
Swal.fire({
title: 'I will be placed inside the #swal2-container',
toast: true,
target: id,
position: 'bottom-left'
});
});
#trial {
position: relative;
left: 50px;
display: block;
height: 200px;
width: 500px;
border: 1px solid;
}
.swal2-container{
position: absolute !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<div id="trial"></div>