我想让我的toastr notification显示在一个div的中间。我看到过一些建议,比如this one,但它是基于整个窗口居中,而不是在一个div内。
当toastr对表单上的元素一无所知时,是否可以将吐司通知放在表单元素的中心?
我最近的一次尝试是把吐司大致放在页面的中心,但我想把它放在某个div的中心。这可能吗?如果可能,怎么做?
这是我的中心化尝试:
.toast-center {
top: 50%;
left: 40%;
}
字符串
的数据
我想让我的toastr notification显示在一个div的中间。我看到过一些建议,比如this one,但它是基于整个窗口居中,而不是在一个div内。
当toastr对表单上的元素一无所知时,是否可以将吐司通知放在表单元素的中心?
我最近的一次尝试是把吐司大致放在页面的中心,但我想把它放在某个div的中心。这可能吗?如果可能,怎么做?
这是我的中心化尝试:
.toast-center {
top: 50%;
left: 40%;
}
字符串
的数据
6条答案
按热度按时间eoigrqb61#
您可以尝试创建一个新的div,并将其放置在预期div的中心。
然后,您可以使用toastr的
positionClass
选项,这是您的通知弹出的位置字符串
mfpqipee2#
在toastr.css中,添加以下内容:
字符串
在JavaScript中,使用这个:
型
如果你的吐司div有其他宽度,你可以修改上面的CSS为它的一半宽度。
型
eqqqjvef3#
你可以用jquery
在toastr.css中,添加以下内容:
字符串
在js文件中,在以下位置添加此内容:
型
q43xntqr4#
在最新版本的ngx-toastr(^14.1.4)中有一个本机解决方案,如果你检查toast.css文件,你可以看到以下内容:
字符串
因此,在调用toastr通知时,您只需在.ts中使用
{positionClass: 'toast-center-center' }
nlejzf6q5#
以下代码片段在angular ~9.1.0中使用**“ngx-toastr”:“^12.1.0”**进行了测试。
组件名称.ts
字符串
组件名.scss
型
cyvaqqii6#
在css样式表中:
字符串
在jQuery文件中:
型