将引导模式窗口显示为浏览器通知

Question

我开发了一个提醒应用程序，我希望以包含表单的通知/弹出窗口/模态窗口的形式向用户显示提醒，而不管用户在浏览器中使用了什么标签。

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

Ps：用表单和实现打盹按钮向用户显示提醒的任何其他想法？我将非常感激。

Answer 1

我会在每个页面中添加一个共同的 div ：

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

当Ajax提取通知时，我会在 div 中设置生成的notif，并使用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') !!}");
          }
        }
      });