在特定 div 内显示 toastr

Question

我需要在特定的 div、class 或 id 中显示 toastr 消息。默认情况下它是 body。我发现我需要改变目标。但我似乎无法让它工作。

比如说我想在这个 div:

里面显示 toastr

<showerror> </showerror>

这是我使用的代码：

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false, 
    "progressBar": false, 
    "positionClass": "toast-top-right",
    "preventDuplicates": false, 
    "onclick": null,
    "showDuration": "300", 
    "hideDuration": "1000", 
    "timeOut": "5000", 
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
};

$('#submitform').submit(function(e){
    e.preventDefault(); 
    console.log($('#ques1').val());
    if($('#ques1').val()==null){
        toastr.error('Please select a question', 'Error!');
   }
});

谁能帮忙。

Answer 1

很简单，只需在 toastr.options

中将新的 class 名称设置为 "positionClass"

toastr.options = { 
    ....
    "positionClass": "your-classname-here",
    ....
};

这是一个Fiddle

Answer 2

老问题，但如果有人遇到这个问题：这是真正的解决方案，而标记的答案只在 toastr 上放置一个 class，这个使 tostr 真正呈现在容器内并显示它在该容器的顶部中心（而不是主体）

toastr 设置：

toastr.options = { 
    ....
    'positionClass': 'tostr_absolute toastr_top_center',
    'target'='.show_error';
    ....
};

Target 可以是任何 CSS 选择器。 positionClass 可以是任何可以帮助您设置 toastr 样式的东西 - 它可以是多个 class，就像这个例子一样！

HTML 标记：

<div class="show_error"></div>

CSS:

.show_error{
    position:relative;
}
.tostr_absolute{
    position: absolute !important;
}
.toastr_top_center {
    top: 0;
    right: 0;
    width: 100%;
}

error-container 需要定位（相对），以便将 toastr 绝对定位在其中！

在特定 div 内显示 toastr

Display toastr within a particular div

javascript

css

jquery

toastr