Notifications

  1. 首頁
  2. 示範Demo

引入js


<script src="../plugins/noty/jquery.noty.packaged.min.js"></script>

整體設定


        var n = noty({
            text        : '<div class="alert alert-success"><p><strong>Your message.</p></div>',
            layout      : 'top', 
            theme       : 'made',
            maxVisible  : 5,
            animation   : {
                open  : 'animated bounceInLeft',
                close : 'animated bounceOutLeft'
                },
            timeout: 3000,
            buttons: [{
                      addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
                          $noty.close();
                          }
                                },{
                      addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {
                          $noty.close();
                          }
                     }],
            });

出現區塊

如果有限定提醒視窗出現的區塊，在noty()前加上目標層的欄位

        var n = $("目標層物件").noty();

text

提示視窗出現之內容


layout

提示視窗出現之位置

topLeft
top
topRight
mediumLeft
medium
mediumRight
bottomLeft
bottom
bottomRight

maxVisible

提示視窗顯示之最大數量


animation

提示視窗進場(opne)/出場(close)之動畫特效，搭配animated.css套件


timeout

提示視窗消失時間(毫秒)

如果想要設定點擊後視窗才消失，將值改成false即可


buttons

將按鈕新增至提示視窗內，下方Demo有展示範例


Demo