使用PNotify構建訊息彈窗

參考位址

官網：github：

npm倉庫：

pnotify 屬性和預設值

text: false – 通知的文字

styling: 'brighttheme' -使用的樣式類. (可以使用'brighttheme', 'bootstrap3', 'bootstrap4', or a styling object.)
icons: 'brighttheme' – 使用的圖示類(可以使用'brighttheme', 'bootstrap3', 'fontawesome4', 'fontawesome5', or an icon object.)
addclass: '' – 要新增到通知中的其他樣式類(使用者自定義型別)
autodisplay: true - 建立通知時顯示通知。關閉此選項可在不顯示通知的情況下向歷史記錄中新增通知。
width: '360px' – 通知的寬度
minheight: '16px' - 通知的最小高度。它將擴充套件以適應內容。
type: 'notice' – 通知的型別. 'notice', 'info', 'success', or 'error'.
icon: true - 將icon設定為true可為所選樣式/型別使用預設圖示，將false設定為noicon，或將字串設定為自己的icon類。
animation: 'fade' - 顯示和隱藏通知時要使用的動畫。'css不支援「none」和「fade」。其他的是通過animate模組和animate.css支援的。
animatespeed: 'normal' - 通知進出動畫的速度。'slow', 'normal', or或'fast'。分別為400毫秒、250毫秒、100毫秒
hide: true – 載入通知延遲一段時間之後關閉通知
delay: 8000 - 通知關閉前的延遲（毫秒）
mousereset: true - 如果滑鼠移動到通知上方，則重置隱藏計時器remove: true -關閉通知後，將其元素從dom中移除
destroy: true -關閉通知時是否從全域性陣列中移除通知
stack: pnotify.defaultstack -通知在頁面上放置的位置
modules: {} – 定義模組選項

例項1：基本用法

var pn= new

pnotify();

例項2：點選事件

//

提示框點選事件，當點選提示框時觸發的事件，可以改變滑鼠的樣式為小手的形狀。
.css('cursor', 'pointer') 設定滑鼠懸浮於通知時的樣式
pn.get().css('cursor', 'pointer').click(function
(e)//
點選之後關閉通知
if(pn)
})

pnotify.defaultstack =

dir1:』down』 down 指如果有多個通知，通知從上向下堆放。
dir2:』left』 left 指通知如果從上向下堆滿之後，從右向左堆放。
var stack_bottomright = ;
var pn= new
pnotify();

總結：使用pnotify構建的提示框外形美觀，pnotify功能齊全，靈活性、易用性都很高。

訊息懸浮彈窗 頂部彈窗

最近寫了乙個訊息彈窗的需求，訊息推送彈窗從頂部滑出，停滯5s，然後消失，使用者可以手動干擾，干擾之後3秒消失。最先想用系統彈窗可以參考 但是寫完之後發現必須要使用者授權才能彈出，而我們的需求是接受通知的開關自己控制，所以不適用，我想到的是獲取decoview的framlayout，然後把自定義的彈窗...

vue彈窗訊息元件練習2

本來打算寫乙個那種提示完了自動消失的彈窗的，但是沒有想好淡入淡出的效果。所以暫時算是半成品。練習 如下 lang en charset utf 8 ys alert componenttitle input ys alert icon content 成功的樣式 success 失敗的樣式 erro...

WPF 對話方塊 訊息彈窗

需求 彈窗是非模式對話方塊，即可以多個彈窗彈出，且彈窗後面的窗體可以被操作，不會被鎖定。自定義的窗體window實現以下步驟 在c 中彈出窗體時，使用 window.show 而不是 window.showdialog 最好設定 window.topmost true 可以在xaml頂部寫 也可以在...