在 div 中居中 toastr 通知
Posted
技术标签:
【中文标题】在 div 中居中 toastr 通知【英文标题】:Center toastr notifications within a div 【发布时间】:2013-03-28 23:13:33 【问题描述】:我正试图让我的toastr notification 出现在 div 的中间。我看过一些建议,例如 this one,但它是基于整个窗口居中的,而不是在 div 内。
当 toastr 对表单上的元素一无所知时,是否可以在表单元素中居中放置 toast 通知?
我最近的尝试是将 toast 大致放在页面的中心,但我想将它放在某个 div 的中心。那可能吗?如果有,怎么做?
这是我的居中尝试:
.toast-center
top: 50%;
left: 40%;
【问题讨论】:
【参考方案1】:您可以尝试创建一个新的 div 并将其放置在您预期的 div 的中心。
然后您可以使用 toastr 的 positionClass
选项,这是您的通知弹出位置
toastr.options:
"positionClass": "your-newly-created-div-class"
【讨论】:
我不确定如何执行您刚才建议的所有操作。让我解决它,看看。谢谢。 感谢您的提示,但我不知道如何让它发挥作用。 @Bob Horn,查看this 文章,它解释了。 我认为这至少是答案的一半,另一半可能是containerId
选项?检查它在 toastr.js here 中的使用。如果你用containerId
把参照系做成表格,然后positionClass
把它放在中间,这样行吗?【参考方案2】:
在 toastr.css 中添加:
.toast-top-center
top: 12px;
left:50%;
margin:0 0 0 -150px;
在 javascript 中,使用这个:
toastr.options =
positionClass: 'toast-top-center'
;
如果你的 toast div 有其他宽度,你可以将上面的 CSS 修改为它的一半宽度。
margin:0 0 0 (here caculate the -width/2 px for yourself)
【讨论】:
【参考方案3】:你可以用jquery做到这一点
在 toastr.css 中添加:
.toast-top-center
top: 12px;
margin: 0 auto;
left: 50%;
margin-left: -150px;
在 js 文件后添加:
toastr.options =
positionClass: 'toast-top-center'
;
toastr.success("Your Message Header", "Your Message");
var $notifyContainer = $('#toast-container').closest('.toast-top-center');
if ($notifyContainer)
// align center
var windowHeight = $(window).height() - 90;
$notifyContainer.css("margin-top", windowHeight / 2);
【讨论】:
【参考方案4】:以下 sn-p 在角度 ~9.1.0 中使用 "ngx-toastr": "^12.1.0" 进行测试。
组件名称.ts
import ToastrService from 'ngx-toastr';
@Component(
selector: 'app-component-name',
templateUrl: './component-name.component.html',
styleUrls: ['./component-name.component.scss']
)
export class ComponentName implements OnInit
constructor(private readonly toastrService: ToastrService)
ngOnInit(): void
this.toastrService.toastrConfig.positionClass = 'toast-top-center';
组件名称.scss
.toast-top-center
top: 12px;
margin: 0 auto;
left: 50%;
margin-left: -150px;
【讨论】:
【参考方案5】:在 ngx-toastr (^14.1.4) 的最新版本中有一个原生解决方案,如果您检查 toast.css 文件,您可以看到以下内容:
.toast-center-center
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
因此,当您调用 toastr 通知时,您只需在 .ts 中使用 positionClass: 'toast-center-center'
【讨论】:
以上是关于在 div 中居中 toastr 通知的主要内容,如果未能解决你的问题,请参考以下文章