Уведомления о начале тоста в div

Question

Я пытаюсь получить мой toastr notification, чтобы появиться в середине div. Я видел некоторые предложения, такие как this one, но это центрирование основано на общем окне, а не в div.

Возможно ли центрировать уведомление тоста в элементе формы, когда toastr ничего не знает об элементах в форме?

Моя последняя попытка состояла в том, чтобы грубо сосредоточить тост на странице, но я хотел бы сосредоточить его на определенном div. Это возможно? Если да, то как?

Это моя попытка центрирования:

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

Answer 1

Вы можете попытаться создать новый 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 выше до половины его ширины.

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