toastr.min.js使用很美觀,不過有滾動條的頁面,如果提示框用了自己設置的樣式,比如讓他居中left:50%,這樣設置后,
比如我添加新記錄,恰好我用了bootstrap的彈出框,這個彈出來不同於toastr,他會彈一個遮罩層,同時會隱藏右側的滾動條,添加新記錄完畢,這個滾動條又會重新出現
這樣造成toastr在彈出時候沒有考慮滾動條寬度,當添加新記錄的彈出框關閉后,toastr還在呈現,而且還會向左移動一點,這是滾動條重新呈現造成的,
解決這個問題有一個簡單不完善的辦法
/* 提示框 toastr.css */
.toast-center-center {
top: 37px;
left: 780px;
margin-top: -25px;
margin-left: -150px;
}
上邊創建css ,直接把左側邊距固定成780像素, 然后在js中寫出如下行,把這個自定義的css類給toastr
toastr.options.positionClass = 'toast-center-center“”
不完美的地方上,在沒有滾動條時候,還是固定左側的,不能根據屏幕大小居中
還有一個更進步的辦法
設置兩個css類
/* 沒有滾動條時候用,根據屏幕居中*/
.toast-center-center {
top: 37px;
left: 50%;
margin-top: -25px;
margin-left: -150px;
}
/* 有滾動條時候用*/
.toast-center-fix {
top: 37px;
left: 780px;
margin-top: -25px;
margin-left: -150px;
}
然后增加一個js函數
/* 提示框 toastr.min.js */
$.toastrGetClass = function () {
if ($.isHasScroll()) //如果有滾動條就用固定的左側寬度
{//有滾動條就固定左側寬度
return "toast-center-fix";
} else {//沒有滾動條就居中
return "toast-center-center";
}
}
把這個函數應用到toastr.min.js 中,在toastr.min.js中定位到
.addClass(t.positionClass)
這里的t.positionClass就是增加css的類,把他換成
.addClass($.toastrGetClass()) //自定義函數,根據屏幕滾動條自動返回類
雖然還不完美,不過可以暫時用用