asp.net - div 内で toastr 通知を中央に配置する

Question

toastr 通知を div の途中に表示しようとしています。this oneのようないくつかの提案を見てきましたが、div 内ではなく、ウィンドウ全体に基づいてセンタリングされています。

toastr がフォーム上の要素について何も知らない場合、トースト通知をフォーム要素内の中央に配置することは可能ですか?

私の最近の試みは、トーストをページ内のほぼ中央に配置することでしたが、特定の div 内に中央に配置したいと考えています。それは可能ですか？もしそうなら、どのように？

これは私のセンタリングの試みです:

.toast-center {
    top: 50%;
    left: 40%;
}

Answer 1

新しい div を作成して、予想される div の中央に配置することができます。

次にpositionClass、通知がポップアップする場所であるtoastrのオプションを使用できます

toastr.options: {
    "positionClass": "your-newly-created-div-class"
}

Answer 2

toastr.css で、これを追加します。

.toast-top-center {
    top: 12px;
    left:50%;
    margin:0 0 0 -150px;
}

JavaScript では、これを使用します。

toastr.options = {
    positionClass: 'toast-top-center'
};

トースト div に他の幅がある場合は、上記の CSS をその半分の幅に変更できます。

margin:0 0 0 (here caculate the -width/2 px for yourself)

Answer 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);
}