将引导模式窗口显示为浏览器通知(Displaying bootstrap modal window as browser notification)

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

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

Ps：用表单和实现打盹按钮向用户显示提醒的任何其他想法？ 将高度赞赏。

I have developed a reminder application and I want to show a reminder to the user in form of a notification/popup/modal-window consisting a form, irrespective of what tab user is using in the browser.

As a response to this notification, user clicks to acknowledge or snooze the notification which closes the modal, just like in Facebook notifications.

Ps: Any alternate idea to show reminder to user with form and implement snooze button? will highly appreciate.

最满意答案

<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') !!}"); } } }); <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') !!}"); } } });将引导模式窗口显示为浏览器通知(Displaying bootstrap modal window as browser notification)

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

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

Ps：用表单和实现打盹按钮向用户显示提醒的任何其他想法？ 将高度赞赏。

I have developed a reminder application and I want to show a reminder to the user in form of a notification/popup/modal-window consisting a form, irrespective of what tab user is using in the browser.

As a response to this notification, user clicks to acknowledge or snooze the notification which closes the modal, just like in Facebook notifications.

Ps: Any alternate idea to show reminder to user with form and implement snooze button? will highly appreciate.

最满意答案

<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') !!}"); } } }); <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') !!}"); } } });