提示框 toastr.min.js 使用時候由於滾動條隱藏造成彈出框位置移動的解決辦法


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()) //自定義函數,根據屏幕滾動條自動返回類

雖然還不完美,不過可以暫時用用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM