javascript - sweetaler2 target opt - swal 仍然在目标之外
问题描述
我在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>
推荐阅读
- c++ - 双向链表类构造函数分段错误
- hibernate - Sprind data JPA:多个OneToMany关系查询
- javascript - 如何安排事件列表
- ios - 在 xcode 12.4 中使用聚合目标构建 xcframework
- c# - 为什么我会为步骤“鉴于我输入密码详细信息”找到不明确的步骤定义 c# specflow
- javascript - 在 Chrome 扩展打开的窗口中运行内联脚本
- validation - 在结帐字段国家/地区添加自定义验证
- php - 只有在 Woocommerce 中应用了某些优惠券时才允许购买特定产品
- javascript - 在使用 JQuery 加载期间依赖项删除将如何工作
- go - 使用反射,如何检查嵌入类型是否覆盖嵌入类型的方法?