显示 bootstrap 模态 window 作为浏览器通知

Question

我开发了一个提醒应用程序，我想以包含表单的 notification/popup/modal-window 形式向用户显示提醒，而不管用户在浏览器中使用的是什么选项卡。

作为对此通知的回应，用户点击以确认或延后关闭模式的通知，就像在 Facebook 通知中一样。

Ps：还有其他想法可以使用表单向用户显示提醒并实现贪睡按钮吗？将不胜感激。

Answer 1

我会在每个页面中添加一个常见的 div:

<div id="notif"></div>

当 Ajax 获取通知时，我会在 div 中设置生成的通知并使用 JQuery UI 对话框显示如下：

$( "#notif" ).dialog();

对话看起来像这样：

Here is the link to jquery dialog

Answer 2

<div class="modal fade" id="ordernotifications-modal" tabindex="-1" role="dialog" aria-labelledby="ordernotifications-modal">
     <div class="modal-dialog modal-lg">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
               <h2 class="modal-title pcConv-title">New Order Notificaitons</h2>
           </div>
           <div class="modal-body notifications-modal-body">
               <div class="onotify-body">

               </div>
           </div>
        </div>
     </div>
   </div>

jQuery:

$.ajax({
        type     : "GET",
        url      : "{!! URL::to('your-route') !!}",
        success  : function(data) {
          if (data > 0){
            $.titleAlert("Title!", {
                requireBlur:false,
                stopOnFocus:false,
                duration:4000,
                interval:700
            });
            $('#ordernotifications-modal').modal('show');
            // $('#playSound')[0].play();
            $( ".onotify-body" ).load( "{!! URL::to('your-route') !!}");
          }
        }
      });

显示 bootstrap 模态 window 作为浏览器通知

Displaying bootstrap modal window as browser notification

html

jquery

notifications

twitter-bootstrap